/***********************
Global
/**********************/
.header {
    width: 100%;
}

.row-padding, .small-padding {
    /*margin: 25px 0 0 0 !important;*/
}


.pad {
    margin-bottom: 8px;
}


/***********************
Small Only
/**********************/
@media only screen and (max-width: 40.0625em) { 
    .img-filters a img {
        width: 80px;
        margin-bottom: 10px;
    }
}


/***********************
CoolStuffCon Packages
/**********************/

#csc-tix-wrapper {
    /*background-color: #eee;*/
    background-image: url("https://res.cloudinary.com/csicdn/image/upload/q_auto,fl_lossy,f_auto/v1/Images/CSI%202%20Articles/sellcards-bg.png"); 
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 3px;
}

#csc-tix-wrapper .packages {
    background-color: #ccc;
    box-shadow: 2px 2px 2px #eee;
    border-radius: 5px;
}

#csc-tix-wrapper .packages:nth-child(2) {
    margin-left: 50px;
}



/***********************
Filters
/**********************/


.main-filters div p {
    margin-bottom: 0px;
}

.variant-filters div p {
    margin-top: 0px;
    margin-bottom: 5px;
}

summary.osc {
    text-align: center;
    font-size: 1.5em;
    color: #00303F;
}

.accordion {
    background: linear-gradient(to bottom, rgba(249, 249, 249, 1) 0%, rgba(239, 239, 239, 1) 100%);
    padding: 10px 5px;
    border-radius: 3px;
}

.accordion-filters {
   margin: 5px 0px 10px 0px;
}

.accordion-filters p.osc {
    margin: 0px;
}

.clear {
    clear:both;
}
 
.filter p {
    margin: 15px 0px;
    line-height: 3em;
    /*white-space: nowrap !important;*/
}

.filter p a {
    white-space: nowrap !important;
    background-color: #fff;
}

.filter .nav-list {
    text-align: center;
}

.filter p a.nav-singles  {
    color: #1183a8 !important; border: 3px solid #1183a8 !important;
}

.filter p a.nav-singles:hover, p a.nav-singles:active{
    background-color: #1183a8 !important;
    color: #fff !important;
    border: 3px solid #1183a8 !important;
}

.filter p a.nav-unclick  {
    pointer-events: none;
    color: #ccc !important;
    border: 3px solid #ccc !important;
} 

.filter .nav-list p a {
    font-size: 14px;
    letter-spacing: .02em;
    color: #00303f;
    border: 3px solid #00303f;
    padding: 5px 25px; /* transition: all 0.5s ease; */
}

.filter .nav-list p a:not(:last-child) {
    margin-right: 5px;
} 

.filter .nav-list p a:hover {
    background-color: #00303f;
    color: #fff;
    text-decoration: none;
    border: 3px solid #00303f;
}

.override {
    margin-top: 10px !important;
}

.override p a {
    font-size: 14px !important;
    padding: 5px 10px !important; /* transition: all 0.5s ease; */
}

.override p  {
    margin: 0px 0px !important;
    line-height: 2.5em !important;
}

/***********************
Image Filters
/**********************/

.img-filters {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

.img-filters a {
    margin-right: 15px;
}

.img-filters a img {
    margin-bottom:10px;
}

.img-filters a:last-child {
    margin-right: 0 !important;
}


.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}


/************************ ******************************/

/***********************
Global - Large Shims and higher
/**********************/
@media only screen and (min-width: 80em) {
    .flex {
        display: flex;
        align-items: center;
    }
}

/***********************
Fancy
/**********************/

.fancy-lines {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fancy-lines h1 {
    display: inline-block;
}

.fancy-lines:before, .fancy-lines:after {
    content: '';
    border-top: 10px double;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
    color: #f0c54f;
}

.fancy-lines:after {
    margin: 0 0 0 20px;
}

.fancy-cta {
    border-style: double hidden double hidden;
    border-color: #f0c54f;
    border-width: 5px;
    border-radius: 15px;
    padding: 10px;
    background-color: #080e0c;
    color: #fff;
    text-align: center !important;
}


/***********************
Fancy - Medium Shims and higher
/**********************/
@media only screen and (min-width: 40.0625em) {
    .cta {
        padding-right: 20px;
    }
}

/***********************
Fancy - Medium and Lower 
/**********************/
@media only screen and (max-width: 80em) {
   .medium-font {
        line-height: 2.3rem;
        font-size: 2rem;
   }
}

/***********************
Fancy - Small Only
/**********************/
@media only screen and (max-width: 40.0625em) {
    .medium-font {
        line-height: 2rem;
        font-size: 1.5rem;
   }
}

.csiGold {
    color: #f0c54f;
    background-image: linear-gradient(to right, #e0890d , #f0c54f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

.csiGold a:hover{
    color: #f0c54f;
    background-image: linear-gradient(to right, #f0c54f , #e0890d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.seal {
    width: 60%;
    margin-bottom: 10px;
}

.nobreak {
    white-space: nowrap;
}


/***********************
Products
/**********************/

.card img {
    box-shadow: 2px 2px 2px #ccc;
}

.details {
    margin: 10px 0;
}

.details h3 {
    font-size: 1.2em;
}

.details h3 strong {
    font-size: .8em;
    color: #dd3333;
}

.details h3 span {
    font-size: .8em;
    display: block;
    color: #262626 !important;
}

.details h4 {
    color: #262626;
}

.details h4 span {
    color: #9d1313;
}

/***********************
Table
/**********************/

table {
    border: 1px #eee solid;
    width: 100%;
}

tr:nth-child(odd) {
    background-color: #eee !important;
}

/*tr:hover {
    background-color: #ccc !important;
}*/

th, td {
    padding: 3px;
    text-align: left;
}

th {
    background-color: #080e0c;
    color: #fff;
    font-weight: bold;
    font-size: 1.1em;
}

/***********************
Table - Large Shims and higher
/**********************/
@media only screen and (min-width: 80em) {
    table tr th {
        padding: 8px;
    }
    
    table tr td {
        font-size: .85em;
        padding: 8px;
    }
}


/***********************
Table - Medium Shims and higher
/**********************/
@media only screen and (min-width: 40.0625em) {
    
}


/***********************
Table - Medium and Lower 
/**********************/
@media only screen and (max-width: 80em) {
    table tr td {
        font-size: .75em;
    }
    
    table tr td span:nth-child(2) {
        display: none;
    }
    
    table tr td span:nth-child(3) {
        display: block;
    }
}


/***********************
Table - Small Only
/**********************/
@media only screen and (max-width: 40.0625em) {
    table tr td {
        font-size: .7em;
    }
}