/* Removes the footer on pages with no-footer class */
body.no-footer footer {
    display: none;
}

header nav#session li.cart>a .cart-icon {
    position: relative;
    top: -6px;
    padding: 0;
    text-indent: -9000px;
    display: inline-block;
    width: 31px;
    height: 21px;
    background: url(../img/sprites.png);
    background-position: -211px -18px;
}

header #logo {
    width: 95px;
    height: 24px;
    overflow: hidden;
    background: url(../img/graphis.png) 0 0 no-repeat;
    text-indent: 9999px;
    position: relative;
    top: 7px;
}

header #logo a {
    border: 0;
    display: block;
}

/* #logo1 {
    width: 95px;
    height: 24px;
    background: url(../img/sprites.png) 0 0 no-repeat;
    position: relative;
    margin-bottom: 6px;
} */
.stripe-logo {
    background: url(../img/stripe-outline-white.png);
    background: url(../img/stripe-outline-black.png);
    text-indent: -9000px;
    display: block;
    width: 119px;
    height: 26px;
  }

.left{
    float:left;
}


.alert-graphis{
    background-color: #2d2c2c;
    color:#b3b3b3;
    padding: 1em;
    font-size: 100%;
    line-height: 2em;
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
}

/*
potential logo replacement
h1 {
    background-image: linear-gradient(to right, #EF3E23, #FFBF10, #5AB347 50%, #00AAE1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    margin: 0 25px;
    padding: 0 10px;
    height: 40px;
}

h1:before,
h1:after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    right: -20px;
    width: 20px;
    height: 100%;
    background: inherit;
    background-position: 100% 100%;
}

h1:before {
    left: -20px;
    background-position: 0 100%;
}
*/

.bg-black {
    background-color: #000000!important;
}
.bg-darkgray{
    background-color: #2D2C2C!important;
}
.bg-footer {
    background-color: #f1f1f1!important;
}
.bg-lighter{
    background-color: #cfcfcf!important;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.details.recents,
.card-header.text-secondary {
    height: 52px;
}

.card {
    border-radius: 0rem;
    padding-right: 0;
    padding-left: 0;
    margin-right: -1px;
    margin-top: -1px;
}


div.card a .details h2,
div.card a .card-header h2 {
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    color: #4b4b4b!important;
    font-size: 12px;
    padding: 4px 10px;
    text-transform: uppercase;
    border-bottom: 1px solid #6D6E71;
    letter-spacing: 1.15px;
    line-height: 1.4em;
    margin: 0;
}
.details .deadline,
.card-header .deadline {
    line-height: 19px;
    padding: 4px 10px;
    font-size: 12px;
    color: #4b4b4b!important;
}
#comp div.card:hover,
#comp div.card:hover>a,
#comp div.card a:hover>div h2 date,
#comp div.card a:hover>div div.col-auto{
    color:#abacb7!important;
    text-decoration: unset;
    transition: 300ms;
    background-color: #2d2c2c;
}

.price {
    margin-left: 4px;
}

.cart-icon {
    width: 31px;
    height: 21px;
    background: url(../img/sprites.png);
    background-position: -211px -18px;
}

li.page-item > a.active {
    background-color: lightgray;

}

hr {                                /*makes all the hr tags visible - they are already responsive*/
    border-top: 1px solid #6c6e71;
    margin-top: 0px;
    margin-bottom: 6px;
}

body {
    -webkit-font-smoothing: subpixel-antialiased;
    background: #000000;
    color: #6d6e71;
    font-size: 12px;
    font-family: 'HelveticaNeueW01-55Roman', 'Helvetica', arial, sans-serif;
    line-height: 1;
}

body.bg-wsi-white {
    background: white;
    color: #000000;

}

@media (max-width:367px) {      /*sets an extra extra small breakpoint, inclusive to phones*/
    .xx-s {
        display: block;
        max-width: 100%;
        flex: 0 0 100%
    }
    .p-xxs-0{
        padding: 0!important;
    }
}


@media(max-width:1200px){
    .social-icons{
        display:none;
    }
}
@media all and (max-width:992px){


    .wiggle{
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
        animation-name: bounce;
      }

    @keyframes bounce {
        5% {
            transform: translateX(-35px);
        }
        /* 15% {
            transform: translateX(-15px);
        } */
        /* 23%{
            transform: translateX(-10px);
        } */
        25%, 100%, 8%, 0%, 20% {
            transform: translateX(0);
        }
    }
}

.scroll{
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

/* hey. hey you. yeah, you. */
/* wanna see something real jank? */
/* this staggers the row animations lmfao */
/* .scroll#row2 .scrollable,
.scroll#row4 .scrollable,
.scroll#row6 .scrollable{
    animation-delay: 100ms;
} */

.scroll > .scrollable{
    max-width: 100% ;
}
.author {
    font-size: 9pt;
    word-spacing: 0;
}


.scroll::-webkit-scrollbar {
    display:none;
}

.mobile-scroll-h::-webkit-scrollbar {
    display:none;
}

.card.cfe a:hover .row{
    background: #2C2C2C;
}

a:hover{
    color:#abacb7 !important;
    text-decoration: none;
}

a.btn-sm:hover{
    color: #fff!important;
}
/* Making the headers booooold */

/*
h1,h2,h3,h4,h6 {
    font-weight: bold;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
}
*/
/* Color and font color related things */
/* You can use these to change stuff like font color =w= */
.white {
    color: #ffffff;
}

.faintgray {
    color: #f1f1f1;
}

.lightgray {
    color: #cfcfcf;
}

.border-lightgray {
    border-color: #cfcfcf !important;
}

.border-muted {
    border-color: #6d6e71 !important;
}

.martygray, .active, .gray2 {
    color: #999999;
}

a, .gray {
    color:#6d6e71;
}

.gray-entry-border, .midgray {
    color: #4d4e4f;
}

.darkgray {
    color: #2d2c2c;
}

.black, .text-black {
    color: #000000 !important;
}

.red {
    color: #ef1c25;
}

.darkred {
    color: #bd1200;
}

.blue, .blue3 {     /* why are there two of these? well, just in case someone tries to use blue3 again. */
    color: #0492bd;
}

.blue2 {
    color: #029cd6;
}
.blue4{
    color: #3c6da7 !important;
}
.gold {
    color: #edc507;
}

.bronze {
    color: #b08005;
}

/* Button editing! >v< */
.btn-sm{
    border-radius: 0rem;
    font-size: 12px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
}

.btn-cfe{
    font-size: 16pt;
    background: #BD1200;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    padding: 12px 16px;
    border-radius: 6px;
    color: #FFFFFF !important;
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
    display: inline-block;
}
.btn-cfe:hover{
    color: #FFFFFF !important;
    background: #6d6e71;
}

.btn-meta-red{
    background-color: #ef1c25;
    font-size: 11px;
    color:white;
    text-transform: uppercase;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    padding: 6px 20px 6px 20px;
    line-height: .8em;
}

a.btn-meta {                /*view all links in store category headers*/
    font-size: 12px;
    padding: 6px;
    padding-top: 9px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    display: inline-block;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

a.btn-sm.right.meta, .btn-secondary{          /*this is for those cute lil squared gray buttons*/
    display: block;
    color: #abacb7;
    background: #3e3e3e;
    margin-right: 0px;
    border-radius: 0px;
}

.btn-publication  {          /*gray store buttons*/
    display: block;
    color: #fff;
    background-color: #6D6E71;
    font-weight: bold;
    margin-right: 0px;
    border-radius: 0px;
}

.btn-sold-out  {          /*red sold out button*/
    display: block;
    color: #fff;
    background-color: #dc3545;
    font-weight: bold;
    margin-right: 0px;
    border-radius: 0px;
}

.btn-filter { /* used for dropdown filters */
    display: block;
    background-color:  #3E3E3E;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 0px;
    font-size: 12px;
    color: #abacb7;
}

a.active {
    color: #ffffff !important;
}

a.btn.right.meta:hover, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active {
    display: block;
    color: #ffffff;
    background-color: #6d6e71;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

.btn.blue, .btn-primary, .btn-info {               /* blue buttons, overrides bootstrap's coloring */
    background: #0492bd !important;
    color: #ffffff;
    border: 0px;
    /*
    border-radius: 2px;
    padding:1px 7px 1px 7px;
    */
}

.btn.blue:hover, .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-info:hover, .btn-info:active, .btn-info.active {
    color: #ffffff !important;
    background: #029cd6 !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.1s linear;
}

.btn-danger  {          /* red buttons, overrides bootstrap's coloring */
    color: #ffffff;
    background: #ef1c25!important;
    /*
    top: 2px !important;
    border-radius: 2px;
    padding:1px 7px 1px 7px;
    */
}

li.btn.btn-dark{ background-color: #6d6e71; }
li.btn.btn-dark.active{ background-color: #000 !important; }

.two-col {
    /*this makes two columns of text lol*/
    columns: 2 300px;
    -moz-columns: 2 300px;
    -webkit-columns: 2 300px;
}

.text-hvlight{ font-family: 'HelveticaNeueW01-45Light', 'Helvetica', arial, sans-serif !important; }

.text-hvroman { font-family: 'HelveticaNeueW01-55Roman' !important;}

.text-hvmed{ font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif !important; }

.text-hvbold, .text-hvbold *, .text-hvbold-all * { font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif !important; }

.hm-0 *{ margin: 0px !important; }

h1{
    /* page title only */
    font-size: 23px;
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
    color: #abacb7;
  }

h2 {
    font-size: 18px;
    line-height: 1.4em;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

h3 {
    /* secondary header */
    font-size: 14px;
    margin-bottom: 6px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
}

h4 {
    font-size: 12px;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    margin-bottom: 6px;
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
}


h5 {
    font-weight: bold;
    color: black;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
}
p{ line-height: 18px;}

/*=====Styles for page headlines=====*/
.page-headline {
  font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
  margin-top: 4px;
  padding: 6px 0 12px 0;
  border-top: 1px solid #6d6e71;
  width: 100%; /* this is so the border-top fills the entire row even if the text doesn't */
  font-size: 16px;
  font-weight: 700;
  color: #999999;
}
.page-headline h1 {
  font-weight: 700;
}
.page-headline-border-bottom {
  border-bottom: 1px solid #6d6e71;
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.page-headline i {
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif !important;
}

/* Styles for page headlines specifically on pages with bg-wsi-white */
body.bg-wsi-white .page-headline {
  font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
  margin-top: 0;
  padding: 8px 0;
  border-top: none;
  color: #000000;
  font-weight: 700;
}
body.bg-wsi-white .page-headline a {
  color: #000000;
  text-decoration: underline;
}
/*=====End of page headlines=====*/

/*
b {
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
}
*/
i {
    font-family: 'HelveticaNeueW01-56It', 'Helvetica', arial, sans-serif;
}

/* makes text shuffle into 5 even columns ovo */
.five-col {
    columns: 5 150px;
    -moz-columns: 5 150px;
    -webkit-columns: 5 150px;
}

.page_title > a, .page_title{white-space: nowrap !important;}

:root{ /* this sets the general portfolio slideshow heights */
    --ssheight:70vh;
    --creds:0px;
}

.days-fs{ font-size: 42px;}
/* media query that adjusts font size of nav items */
@media (min-width: 550px) and (max-width: 992px){
    li h1{
        /* font-size: calc(18px + 6 * ((100vw - 550px) / 442)); */
        font-size: 20px !important;
    }
    .page-headline h1{
        font-size: 23px;
    }
    .carousel-caption .row h5{
        font-size: calc(14px + 4 * ((100vw - 550px) / 442));
    }
    .days-fs{ font-size: 32px;}
    :root{
        --ssheight:60vw;
        --creds:30px
    }
}

/* sets min nav h1 size */
@media (max-width: 550px){
    li h1{
        font-size: 18px !important;
    }
    .page-headline h1{
        font-size: 22px;
    }

    .carousel-caption .row h5{
        font-size: 14px;
    }
    .days-fs{ font-size: 26px;}
    :root{
        --ssheight: 70vw;
        --creds:30px;
    }
    ::-webkit-scrollbar{
        background: transparent;
        height: 0;
        width: 0;
        -webkit-appearance: none;
        display: none;
    }
}

.carousel-caption{
    position:relative;
    right:0;
    bottom:0;
    left:0;
}

.carousel-caption strong{
    color: white !important;
}




/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

/* ============ desktop view ============*/
@media all{
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{ color: #ABACB7 !important;  }
	.navbar .nav-item:hover .dropdown-menu{ display: block;background-color: black; margin-top: -1px;}
    .navbar .nav-item:hover .dropdown-item{ color: gray;}
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
    .navbar .nav-link{ white-space: nowrap;}
    .navbar .nav-item:first-child a{padding-left:0rem;}
    .navbar .nav-item:first-child .dropdown-menu a, .navbar-expand-lg .dropdown-menu a{padding-left: calc(0.6rem + 6px);}
}
@media all and (max-width: 992px) {
    .mobile-scroll-h{
        overflow-x: auto;
    }
    .navbar .nav-item a{padding-left:0.6rem; padding-right: 0.6rem;}
    .navbar .nav-item .dropdown-menu a{padding-left:calc(0.6rem + 6px);}
    .navbar-collapse .nav-item:first-child a{padding-left:0.6rem;}
}

@media all and (max-width: 991px) {
    /* collapsible menu styling */


    .mobile-hidden{display:none;}

    .navbar-collapse {
        background-color: black;
        color: snow;
        transition: all ease-in .25s;
        padding: 3rem 1rem;
        font-size: larger;
        height: 100%;
        z-index: 30;
        position: fixed;
        top: 0;
        left: -200px;
        border-right: 1px solid snow !important;
    }
    .navbar-collapse.show{      /* necessary for making navbar slide onto screen */
        left: 0;
    }
}


.graphis-nav{
    text-transform: uppercase;
    font-weight: 700;
}
.graphis-subnav {
    flex-direction:row !important;
    margin-left:auto !important;
}

.graphis-subnav > li h1{
    font-size: 23px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    letter-spacing: 1px;
    color: #6d6e71;
}
@media(max-width:991px){
    .graphis-subnav{
        margin-left: 0 !important;
    }
}


.graphis-subnav > li:first-child .nav-link{
    padding-left:0px !important;
}
.graphis-subnav > li:last-child .nav-link{
    padding-right:0px !important;
}
.graphis-subnav > * .nav-link{
    padding-bottom :0px !important;
    padding-top: 0px;
}

.graphis-subnav > * .nav-item{
    top: 3px !important;
}
/*
.graphis-subnav{
    flex-direction: row;
    font-size: 23px;
    line-height: 28px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    letter-spacing: 1px;
    color: #6d6e71;
}
nav font sizing
nav{
    font-weight: 700;
}
.graphis-subnav, .graphis-subnav > .dropdown{
    flex-direction: row;
    font-size: 23px;
    line-height: 28px;
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    letter-spacing: 1px;
    color: #6d6e71;
    float: right;
}
.navbar-nav .dropdown:hover .dropdown-menu{
    margin-top: 0px;
    background-color: white;
    display:block;
}

.graphis-subnav > li{
    white-space: nowrap;
    padding-right: 12px;
}
*/
/* ============ desktop view .end ============ */
.carousel-control-prev, .carousel-control-next {
    width: 30%;
}

.carousel-control-prev > .carousel-control-prev-icon {
    height: 0;
    width: 0;
    border-radius: 50%;
    margin-left: 50px;
}

.carousel-control-next > .carousel-control-next-icon {
    height: 0;
    width: 0;
    margin-right: 50px;
}

.carousel-control-prev:hover > .carousel-control-prev-icon, .carousel-control-next:hover > .carousel-control-next-icon {
    height: 3vw;
    width: 3vw;
    outline: black;
    transition-duration: 300ms;
}

.border h6{                 /* a replacement for those marty line dividers */
    font-weight: bold;
    letter-spacing: 0px;
    margin-bottom: 5px;
    padding-top: 4px;
    padding-left: 6px;
}
.fw-700, .fw-700-all * {
    font-weight: 700 !important;
}
.border-secondary {
    border-color: #6d6e71 !important;
}

/* overriding bootstrap's font colors */
.text-primary {
    color: #029cd6;
}

.text-dark {
    color: #2d2c2c;
}

.text-danger {
    color: #ef1c25!important;
}
.text-secondary {
    color: #5f5f5f !important;
}
.text-muted, .text-muted-all * {
    color: #6d6e71 !important;
}
.text-alert {
    color: #b3b3b3 !important;
}
.text-lighter{
    color:  #abacb7  !important;
}
.text-lightgray{
    color: #8A8A8A !important;
}

.hover-lighter:hover{
    color:  #abacb7  !important;
}

.underline{ text-decoration: underline !important; }

.fs-10 { font-size: 10px !important; }
.fs-12 { font-size: 12px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-16, .fs-16 *{ font-size: 16px !important;}
.fs-17 { font-size: 17px !important; }
.fs-18 { font-size: 18px !important; }

/* squaring alerts */
.alert {
    border-radius: 0;
}

.mt-30{ margin-top: 30px !important; }
.my-30{ margin-top: 30px !important; margin-bottom: 30px !important; }
.mb-30{ margin-bottom: 30px !important; }

.border-y{
    border-bottom: 1px solid !important;
    border-top: 1px solid !important;
}

.credit-card-icons:not(.active) {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.store-img-size{
    max-width: 168px;
    max-height: 290px;
}
.short_description{
    color:#6D6E71
}
.short_description b, .short_description strong{
  font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif !important;
}
strong{
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif !important;
}
/* === store click on product ===*/
.publication-extra {
    color:#6d6e71;
    padding-top: 8px;
    margin-top: 4px;
 }

 blockquote cite{
    letter-spacing: .4px;
    font-size: 11px;
    font-family: 'HelveticaNeueW01-75Bold', 'Helvetica', arial, sans-serif;
    color: #444444;
    font-style: normal;
 }

 blockquote cite span {
    padding-left: 6px;
    font-family: 'Times', serif;
    color: #999999;
    font-size: 12px;
    font-style: italic;
}
/* ========*/
@media screen and (min-width: 768px) and (max-width:991px){
    .col-md-3_5{
        flex: 0 0 29.5%
    }
}
@media (min-width:992px){
    .col-lg-2_4{
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.col-1_7{
    -ms-flex: 0 0 14.29%;
    flex: 0 0 14.29%;
    max-width: 14.29%;
}
/* Columns that are 1/5th of their container */

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

/* End 1/5th columns */

/* Styles for filters */
.dropdown-menu {
    background-color:  #3E3E3E;
    border-radius: 0px;
    margin-top: -1px;
}

.dropdown-item {
    background-color: inherit;
    font-size: 12px;
    color: #abacb7;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 100%;
    margin-top: -5px;
    margin-left: 19px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 1px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.pre-scrollable {
    overflow-y: scroll !important;
}
.border-dashed{
  border-style: dashed;
}

.line-height {
    line-height: 0.95em !important;
}
.lh-18{
    line-height: 18px !important;
}
.lh-24{
    line-height: 24px !important;
}
/* pagination shit */
.pagination .page-link{
    background-color: transparent;
    color: #5a5b5d !important;
    border-color: #6d6e71 !important;
    width: fit-content;
    padding: 0px 5px;
}
.flex-fill .page-link{
    width: -webkit-fill-available;
}
.page-item {
    height: min-content;
}
.pagination .page-link.active,
.pagination .page-link:hover{
    color: #abacb7 !important;
}
body.bg-wsi-white .pagination .page-link{
    border-color: #000!important;
}
body.bg-wsi-white .page-link.active,
body.bg-wsi-white .page-link:hover {
    color: #000!important;
}

/* for the portfolio indicators */
.row.justify-content-start .carousel-indicators{
    width: fit-content;
    position: relative;
    color: #abacb7;
}
.row.justify-content-start .carousel-indicators li:hover{
    opacity: 1;
}

.avoid-break-inside {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


.column-count{column-count: 4;}


@media (max-width:767px){
    .column-count{ column-count: 2;}
}


@media (max-width:575px){
    .column-count{ column-count: 1;}
}

.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-radius: 0 !important;
}


.btn-store {
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    font-size: 10px !important;
    border-radius: 2px !important;
}

.safari-nobreak{
    white-space: nowrap !important;
}

.slideshow-title {
    font-family: 'HelveticaNeueW01-65Medium', 'Helvetica', arial, sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    color: #6d6e71;
}

/* Use these classes to quickly change letter spacing */
.spacing0 {
    letter-spacing: 0px!important;
}

.spacing_6{
    letter-spacing: .6px!important;
}

.spacing1 {
    letter-spacing: 1px !important;
}

.spacing1_4 {
    letter-spacing: 1.4px !important;
}

.spacing1_8 {
    letter-spacing: 1.8px !important;
}
/* End letter spacing */

.form-control { /* Bootstrap already defines this, I'm making it !important to override some weird collisions */
    border-radius: 0.25em !important;
}

.dim{
    opacity: .2
}
.dim:hover{
    opacity: 1;
}
/* i'll rename this later */
.box-img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    width:100%;
    background-repeat: no-repeat;
    background-position: center center;
}

.store-box-img{
    max-width: 100%;
    height: auto;
    object-fit: cover;
    width:100%;
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (max-width: 767px) {
    .box-img, .store-box-img {
        display: block;
        max-width: 100%;
        height: auto;
    }
}

.play-button{
    top: 50% !important;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    margin: auto;
    width: 70px !important;
    height:auto !important;
}

.better-box{
    width: 100%;
}
@media (min-width:320px){
.profile-cfe-box{ width: 137px; height: 137px}
.profile-portfolio-box{ width: 137px; height: 137px;}
.better-box {height:290px;}
.annual-report-judges-img{ width:100%; height:0; padding-bottom:100%;}
}

@media (min-width:360px){
.profile-cfe-box{ width: 157px; height:157px;}
.profile-portfolio-box{ width: 157px; height:157px;}
.better-box {height:330px;}
}

@media (min-width:410px){
.profile-cfe-box{ width: 182px; height:182px;}
.profile-portfolio-box{ width: 182px; height:182px;}
.better-box {height:380px;}
}

@media (min-width:480px){
.profile-cfe-box{ width: 217px; height:217px;}
.profile-portfolio-box{ width: 217px; height:217px;}
.better-box {width: 450px; height:450px;}
}

@media (min-width:576px){
.profile-cfe-box{ width: 145px; height:145px;}
.profile-portfolio-box{ width: 159.328px; height:159.328px;}
.better-box {width: 510px; height:510px;}
.product-carousel-box{width: 510px; height:353px;}
.product-box{height: 353px;}
.annual-report-judges-img{ width:158.33px; height:158.33px; padding-bottom: 0;}
.carousel-caption h5 {margin-left: 2px !important;}
}

@media (min-width:768px){
.profile-cfe-box{ width: 160.5px; height:160.5px;}
.profile-portfolio-box{ width: 101.656px; height:101.656px;}
.better-box {width: 330px; height:330px;}
.product-carousel-box{width: 450px; height:311px;}
.product-box{height: 311px;}
.annual-report-judges-img{ width:218.33px; height:218.33px; padding-bottom: 0;}
.carousel-caption h5 {margin-left: 6px !important;}
}

@media (min-width:992px){

.profile-cfe-box{ width: 220.5px; height:220.5px;}
.profile-portfolio-box{ width: 141.656px; height:141.656px;}
.better-box {width: 450px; height:450px;}
.product-carousel-box{width: 609.984px; height:422.022px;}
.product-box{height: 422.022px;}
.annual-report-judges-img{ width:140.66px; height:140.66px; padding-bottom: 0;}
.carousel-caption h5 {margin-left: 10px !important;}

}

@media (min-width:1200px){
.profile-cfe-box{ width: 265.5px; height:265.5px;}
.profile-portfolio-box{ width: 171.656px; height:171.656px;}
.better-box {width: 540px; height:540px;}
.product-carousel-box{width: 730px; height:505px;}
.product-box{height: 505px;}
.annual-report-judges-img{ width:170.66px; height:170.66px; padding-bottom: 0;}
.carousel-caption h5 {margin-left: 14px !important;}
}

@media (max-width:1200px) {
.ol-hidden{width:50vw !important;}
}

/* This is for images on the awards and certificates pages */
div.line.maincol img {
    max-width: 100% !important;
    height: auto !important;
}

div.line.maincol .left {
    float: none !important;
}

.graphis-card-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

/* This is for videos in entries and portfolios */
/*
.video-frame {
    position: relative;
    width: 100%;
}
.video-frame img.play-button {
    cursor: pointer;
    position: absolute;
    width: 74px;
    opacity: 0.87;
}
.video-frame img.play-button:hover {
    opacity: .95;
}
.video-container {
    position: relative;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 50px;
    height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    left: 0;
    width: 100%;
    max-height: var(--ssheight);
}

.video-frame, iframe {
    height: var(--ssheight) !important;
}
*/