/*---------------------+
 | Site: iREAD         |
 | Part: Master styles |
 +---------------------*/

/* Imports
=====================================================================*/
@import url(//fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic|Montserrat:400,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css);
@import url(/content/styles/reset.css);
@import url(/content/styles/forms.css);


/* Fonts
======================================================================*/
.action, h1, h2, h3, #nav, .vcard .org { font-family: Montserrat, Arial, sans-serif; }
body, input, select, textarea, #nav-total { font-family: "Open Sans", Arial, sans-serif; }


/* Basics
======================================================================*/
a { color: #084aa3; text-decoration: none; }
a:hover { text-decoration: underline; }
address { font-style: normal; }
body { background: #ed2f39; font-size: 18px; line-height: 1.4; }
cite, em { font-style: italic; }
dl, ol, p, table, ul { margin-bottom: 1em; }
dt { margin-top: 1em; }
dt:first-child { margin-top: 0; }
dt, h2, h3, h4, h5, h6, strong { font-weight: bold; }
h1 { font-size: 36px; font-weight: bold; line-height: 1.1; margin-bottom: 1em; }
h2 { font-size: 28px; font-weight: bold; line-height: 1.1; margin-bottom: 0.5em; }
h3 { font-size: 22px; line-height: 1.2; margin-bottom: 0.5em; }
h4 { font-size: 17px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
hr { background: #ddd; border: 0; clear: both; color: #ddd; height: 1px; margin: 1.8em 0; }
img { max-width: 100%; }
li { margin-bottom: 0.5em; }
ol { list-style: decimal; margin-left: 2em; }
ol ol { list-style: lower-alpha; }
ol ol ol { list-style: lower-roman; }
table { border-collapse: collapse; width: 100%; }
table h2, table p { margin: 0; }
td { border: 1px solid #ddd; border-width: 1px 0; }
td, th { padding: 0.5em 1em 0.5em 0; vertical-align: top; }
td[align=center], th[align=center] { text-align: center; }
td[align=right], th[align=right] { text-align: right; }
tfoot td { border: 0; }
th img { vertical-align: middle; }
th { font-weight: bold; vertical-align: bottom; }
thead th { vertical-align: bottom; }
ul { list-style: disc; margin-left: 1.5em; }

/* Stock classes */
.c { text-align: center; }
.l { float: left; }
.r { float: right; }
.num { text-align: right; }
ul.flat { list-style: none; margin-left: 0; }
ul.flat > li { background: none; margin: 0; padding: 0; }


/* Core layout
======================================================================*/
.clear { clear: both; }
.content, .intro-content { box-sizing: border-box; margin: 0 auto; max-width: 1130px; padding: 0 20px; }

/* Columns */
.c2l, .c2r { width: 48%; }
.c2l, .c3l, .c3m { float: left; }
.c2r, .c3r { float: right; }
.c3l { margin-right: 3%; }
.c3l, .c3m, .c3r { width: 31%; }

/* Main */
.content-primary { float: left; width: 65.48%; }
.content-secondary { float: right; width: 30.97%; }
#main { background: #fff; padding: 30px 0 50px; }

    /* Wide */
    .full .content-primary, .full .content-secondary, .home .content-primary, .home .content-secondary { float: none; width: auto; }


/* Content
======================================================================*/
/* Accordion */
.accordion {margin: 0; padding: 0; list-style: none;}
.accordion input {display:none;}
.accordion label {display:block; border: none; padding: .5rem 1rem; margin: 0 0 .25rem 0; width:100%; text-decoration: none; border:1px solid #333333; background-color: #333333; color: #ffffff; cursor: pointer; text-align: left; transition: ease .3s; -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.accordion label:hover, .accordion label:focus {border:1px solid #333333; background-color:#fff; color:#333333;}
.accordion label svg {margin-top:5px; float:right;}
.accordion input:checked + label svg {transition: .3s transform ease-in-out;transform: rotate(180deg);}
.accordion_content {padding: .75rem .75rem;}
.accordion input + label + .accordion_content {display:none;}
.accordion input:checked + label + .accordion_content {display:block;}

/* Action */
a.action, button.action, input.action, span.action a {
    -webkit-appearance: none;
    appearance: none;
    background: #ed2f39;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    font-weight: normal;
    display: inline-block;
    padding: 0.5em 1em;
    vertical-align: middle;
}

.action:hover, .action:hover a { opacity: 0.7; text-decoration: none; }
.action-major { font-size: 30px; padding: 0.7em 1.7em; }

/* Account navigation */
#account-nav-secondary { list-style: none; margin: 0 0 2em; }
#account-nav-secondary .current { font-weight: bold; }
#account-nav-secondary li { display: inline; margin-right: 1em; }

/* Addresses */
.addresses { clear: both; list-style: none; margin: 15px 0; }
.addresses .actions { list-style: none; margin: 0; }
.addresses .actions li { display: inline; margin: 0 1em 0 0; }
.addresses .card { margin-bottom: 0; }
.addresses > li { float: left; margin: 0 2% 15px 0; width: 48%; }
.addresses > li:nth-child(2n+3) { clear: left; }
.addresses > li.selected .card { background: #f0f0f0; border-color: #555; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
.addresses > li p { margin-bottom: 0.5em; }

/* Artists */
.artists { list-style: none; margin: 0; }
.artists li { margin-bottom: 30px; overflow: hidden; padding-left: 250px; }
.artists .thumb { float: left; margin-left: -250px; width: 230px; }

.banner { color:white; align-items: center; text-align: center; padding: 1.5em; width: 100%; font-size: larger; background-image: url('/Content/images/spinutech-header.png'); }
.banner a { color:white;}

/* Best seller */
.best { color: #084aa3; font-size: 14px; font-weight: bold; text-transform: uppercase; }

/* Breadcrumbs */
.breadcrumbs { list-style: none; margin: 0 0 1em; }
.breadcrumbs .fa { margin-left: 0.5em; }
.breadcrumbs li { display: inline; margin-right: 0.4em; white-space: nowrap; }

/* Browse */
#browse { clear: both; overflow: hidden; }
#browse-primary { float: right; width: 79.29%; }
#browse-secondary { float: left; width: 17.16%; }
#browse-secondary .categories { font-size: 18px; font-weight: 600; list-style: none; margin-left: 0; }
#browse-secondary .categories .current a { color: #000; font-weight: bold; }
#browse-secondary .categories li { margin-bottom: 0.8em; }

/* Callouts */
[class *= "call"] { font-size: 13px; font-weight: normal; line-height: 1.3; margin-bottom: 15px; max-width: 100%; }
[class *= "call"] img { display: block; margin-bottom: 5px; }
[class *= "call"] img.icon { display: inline; }
[class *= "call"] p { margin-bottom: 0.5em; }
.call-l, .pull-l, .pull-small-l { clear: left; float: left; margin: 0 30px 10px 0; }
.call-r, .pull-r, .pull-small-r { clear: right; float: right; margin: 0 0 10px 30px; }
dt img.call-l { margin-top: 0; }
.credit { font-size: 12px; margin: 0.5em 0; text-align: right; }
.credit a { color: #7f8183; }
.pull, .pull-l, .pull-r { color: #4d4d4d; font-size: 24px; font-weight: bold; line-height: 1.3; width: 42.15%; }
[class *= "pull-small"] { border: 1px solid #ccc; border-width: 2px 0; font-size: 16px; line-height: 1.6; width: 42.15%; }
[class *= "pull"] blockquote cite { color: #666; display: block; font-size: 16px; font-weight: normal; text-align: right; }
[class *= "pull"] .mute { font-weight: normal; }
[class *= "pull"] p { margin-bottom: 0.5em; }

/* Cards */
.card { margin-bottom: 40px; }
.card-content { border: 1px solid #ddd; border-radius: 0 0 6px 6px; overflow: hidden; padding: 30px; }
.card-content h3 { margin: 0; }
.card-head { background: #ed2f39; border-radius: 6px 6px 0 0; color: #fff; font-size: 30px; font-weight: 700; padding: 0.25em 1em; text-align: center; }

/* DataTables */
.dataTables_wrapper { clear: both; }
.dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
.dataTables_wrapper .dataTables_filter .txt { margin: 0; width: 10em; }
.dataTables_wrapper .dataTables_info { float: right; }
.dataTables_wrapper .dataTables_length { float: right; }
.dataTables_wrapper .dataTables_length select { margin-left: 0.5em; }
.dataTables_wrapper .dataTables_paginate .paginate_active { color: #000; font-weight: bold; margin-right: 1em; }
.dataTables_wrapper .dataTables_paginate .paginate_button { margin-right: 1em; }
.dataTables_wrapper .dataTables_paginate .paginate_button_disabled { color: #666; }
.dataTables_wrapper .sorting, .dataTables_wrapper .sorting_asc, .dataTables_wrapper .sorting_desc { cursor: pointer; }
.dataTables_wrapper table { clear: both; }
.dataTables_wrapper th.sorting .fa-caret-down, .dataTables_wrapper th.sorting .fa-caret-up { display: none; }
.dataTables_wrapper th.sorting_asc .fa-caret-down { display: none; }
.dataTables_wrapper th.sorting_desc .fa-caret-up { display: none; }

/* Dropdown */
.dropdown { display: inline-block; position: relative; }
.dropdown a { text-decoration: none; }
.dropdown .fa { margin-left: 0.3em; }
.dropdown > a { display: inline-block; }
.dropdown > a:hover { text-decoration: none; }

.dropdown .menu {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: none;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    list-style: none;
    left: 0;
    margin: 0;
    text-align: left;
    top: 31px;
    white-space: nowrap;
    z-index: 1000;
}

.dropdown .menu a { display: block; padding: 0.5em 1em; }
.dropdown .menu a:hover { background: #f0f0f0; text-decoration: none; }
.dropdown .menu li { display: block; margin: 0; }
.dropdown.r .menu { left: auto; right: 0; }
.dropdown-toggle { white-space: nowrap; }

/* Error handling */
.error { color: red !important;}

/* Features */
#subfeatures { margin-bottom: 30px; overflow: hidden; }
#subfeatures .panel { margin-bottom: 30px; }
#subfeatures .panel-content { background: #fff; border: 1px solid #ddd; border-radius: 0 0 6px 6px; border-top-width: 0; padding: 20px 20px 20px; }
#subfeatures .panel-head img { display: block; width: 100%; }

/* FAQ's */
#search-faqs { display:flex; }
#faqKeyword {display: flex; width: 90%; }
#faqKeywordSbt {display: flex; }

/**
 * Required CSS 
 */
.accordion__title {
  cursor: pointer;
  margin: 0;
  position: relative;
}

.accordion__icon {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

.accordion__icon .line-01,
.accordion__icon .line-02 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  transition: 0.3s;
}

.accordion__icon .line-02 {
  transform: rotate(90deg);
}

.accordion__content {
  display: none;
}

.accordion--open > .accordion__title .line-02 {
  transform: rotate(0deg);
}
/* end Required CSS */

/**
 * Now let's make it look pretty! 
 */

.accordion
{
    margin-top: -1px;
/*    border-top: 1px solid #ed2f39;
    border-bottom: 1px solid #ed2f39;*/
}

.accordion__title {
  padding: 20px 16px;
  font-size: 16px;
  transition: 0.2s;
}

.accordion__content {
  padding: 24px 16px;
  height: auto !important;
}

.accordion__content p {
  margin: 0 0 16px;
}

.accordion__title:hover
{
    background-color: #ed2f39;
    color: #fff;
}

.accordion__title:hover .line-01,
.accordion__title:hover .line-02 {
  background-color: #fff;
}

.accordion--open > .accordion__title
{
    background-color: #ed2f39;
    color: #fff;
}

.accordion--open > .accordion__title .line-01,
.accordion--open > .accordion__title .line-02 {
  background-color: #fff;
}

.accordion--nested .accordion__title {
  padding: 16px;
  font-size: 14px;
}

.accordion--nested .accordion__content {
  padding: 24px 16px 16px;
}

/* Footer */
#footer { text-align: center; }
#footer .content { padding-bottom: 45px; padding-top: 45px; }
#footer, #footer a { color: #fff; }
#footer h6 { font-size: 18px; font-weight: 600; margin-bottom: 0.5em; text-transform: uppercase; }
#footer .social { font-size: 25px; }
#footer .social .fa-stack-1x { color: #ed2f39; }

    /* Copyright */
    #copyright { border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 14px; padding-top: 1em; }
    
    /* vCard */
    .vcard { margin-bottom: 1em; }
    .vcard .adr, .vcard .email, .vcard .fax, .vcard .street-address { margin: 0 0.5em; }
    .vcard .contact { font-weight: 600; margin-bottom: 0.4em; }
    .vcard .contact, .vcard .org { display: block; font-size: 30px; }
    .vcard .org { text-transform: uppercase; }
    .vcard .org .proper { text-transform: none; }

/* Grids */
.grid { clear: both; line-height: 1.3; list-style: none; margin-left: 0; overflow: hidden; }
.grid a { display: block; position: relative; }
.grid a:hover { opacity: 0.7; text-decoration: none; }
.grid li { box-sizing: border-box; float: left; margin: 0 2.7% 25px 0; }
.grid p { margin: 0; }
.grid .thumb { display: block; margin-bottom: 5px; max-width: none; width: 100%; }
.grid .title { font-weight: 600; margin-right: 0.3em; }

    /* Columns */
    .grid.grid1 li { margin-right: 0; }
    .grid.grid2 li { width: 48.64%; }
    .grid.grid3 li { width: 31.53%; }
    .grid.grid4 li { width: 22.97%; }
    .grid.grid5 li { width: 17.83%; }
    
    .grid.grid2 li:nth-child(2n+2),
    .grid.grid3 li:nth-child(3n+3),
    .grid.grid4 li:nth-child(4n+4),
    .grid.grid5 li:nth-child(5n+5) { margin-right: 0; }
    
    .grid.grid2 li:nth-child(2n+3),
    .grid.grid3 li:nth-child(3n+4),
    .grid.grid4 li:nth-child(4n+5),
    .grid.grid5 li:nth-child(5n+6) { clear: left; }

.hide-borders td {border:none; }

/* Header */
#header { background: #fff; padding: 20px 0 7px; }
#header .content { overflow: hidden; }

    /* Header nav */
    #header-nav { float: right; font-size: 20px; margin: 15px 0 1em; text-align: right; }
    #header-nav .current a { color: #000; font-weight: bold; }
    #header-nav li { display: inline; margin-left: 0.7em; }
    #header-nav ul { border-left: 1px solid #ddd; display: inline; list-style: none; margin: 0 0 0 0.7em; }
    #header-nav ul:first-child { border: 0; }
    
    /* Logo */
    #logo { float: left; max-width: 400px; width: 44%; }
    #logo img { display: block; }
    
    /* Tagline */
    #tagline { clear: right; float: right; font-size: 16px; font-style: italic; text-align: right; width: 48%; }

.tag-item {
    font-size:smaller;
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}
/* Home */
.home h2 { color: #ed2f39; font-size: 30px; margin-bottom: 1.5em; }
.home h3 { margin-bottom: 0.5em; }

/* Icons */
.fa-envelope { color: #555; }
[class *= "fa-facebook"] { color: #3b5998; }
[class *= "fa-pinterest"] { color: #cc2127; }
[class *= "fa-star"] { color: #fcc62b; }
[class *= "fa-twitter"] { color: #55acee; }

/* Intro */
.intro { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; font-size: 21px; font-weight: 300; min-height: 600px; }
.intro .action { font-size: 1em; }
.intro h1 { color: var(--primary-color); font-size: 40px; font-weight: bold; margin-bottom: 0.2em; }
.intro, .intro a { color: #fff; }
.intro-content { padding-top: 134.5px; }
.intro-overlay { background-color: #084aa3; padding: 30px 40px 10px; width: 85%; opacity: 0.8; }

/* Iframes */
.iframe-container { height: 0; overflow: hidden; padding-top: 30px; position: relative; }
.iframe-container iframe { left: 0; height: 100%; position: absolute; top: 0; width: 100%; }

/* More links */
.more a {
    background: #f0f0f0;
    clear: both;
    color: #4d4d4d;
    display: block;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.more a:hover { background: #cdccc9; }

/* Muted text */
.mute { color: #7f7f7f; font-size: 13px; font-weight: normal; }

/* Navigation */
#nav { background: #ed2f39; font-weight: bold; padding: 10px 0; }
#nav, #nav a { color: #fff; }
#nav a { border-radius: 4px; padding: 0.4em 0.5em; }
#nav a:hover { background: rgba(255, 255, 255, 0.2); text-decoration: none; }
#nav ul { list-style: none; margin: 0; }

    /* Account */
    #nav-account { float: right; padding-top: 0.4em; text-align: right; }
    #nav-account li { display: inline-block; margin: 0 0 0 0.3em; }
    #nav-account #nav-cart .fa { font-size: 25px; vertical-align: -0.1em; }
    #nav-account #nav-total { font-weight: normal; }
    
    /* Menu */
    #menu {
        background: #ed2f39;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        display: none;
        font-size: 16px;
        overflow-x: hidden;
        overflow-y: auto;
        height: 100%;
        position: fixed;
        right: -400px;
        top: 0;
        width: 250px;
        z-index: 1000;
    }
    
    #menu a { border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: block; padding: 0.8em 1.1em; }
    #menu a:hover { text-decoration: none; }
    #menu li { border-radius: 0; margin: 0; }
    #menu li.current { background: #fff; }
    #menu li.current > a { color: #000; font-weight: bold; }
    #menu .social { padding: 1em 0.5em; text-align: center; }
    #menu .social a { border: 0; display: inline; padding: 0; }
    #menu ul { list-style: none; margin: 0; }
    #menu ul { list-style: none; margin: 0; }
    #menu ul ul a { border-bottom: 0; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #2e57bf; }
    #menu ul ul li.current a { color: #000; }
    #menu-account { border-top: 3px double rgba(255, 255, 255, 0.8); }
    #menu-account a, #menu-primary a { color: #fff; }
        
        /* Toggle */
        #nav-toggle { color: #ed2f39; float: right; font-size: 10px; padding: 0.5em; text-align: center; text-transform: uppercase; }
        #nav-toggle .fa { display: block; font-size: 27px; }
        #nav-toggle:hover { text-decoration: none; }
    
    /* Primary */
    #nav-primary { float: left; }
    #nav-primary li { display: inline-block; margin: 0 0.3em 0 0; }
    
    /* Secondary */
    #nav-secondary { font-size: 18px; margin-bottom: 30px; }
    #nav-secondary h3 { display: none; margin-bottom: 0.5em; }
    #nav-secondary li.current > a { color: #000; font-weight: bold; }
    #nav-secondary ul { list-style: none; margin: 0; }
    #nav-secondary ul ul { font-size: 14px; list-style: disc; margin: 0.5em 0 0.5em 1.5em; }

/* Paging */
.pages, .pages ul { clear: both; float: none; font-size: 16px; list-style: none; margin: 50px 0 30px; text-align: center; }
.pages li { display: inline; margin: 0 10px 0 0; }

/* Price */
.price { color: #ed2f39; white-space: nowrap; }

/* Product detail */
#product { overflow: hidden; }
#product h1 { font-size: 28px; margin-bottom: 0.5em; }
#product .price { font-size: 24px; vertical-align: middle; }
#product select { width: 100%; }
#product-actions, #product-description, #product-media { margin-bottom: 20px; }

    /* Actions */
    #product-actions { float: right; text-align: center; width: 22.38%; }
    #product-actions .action { display: block; margin-top: 10px; width: 100%; }
    #product-actions .box { border: 1px solid #ddd; border-radius: 5px; margin-bottom: 30px; padding: 20px 20px 10px; }
    #product-actions h2 { font-size: 21px; }
    #product-actions .pricing .price { font-weight: bold; }
    #product-actions .qty { font-size: 13px; font-weight: bold; text-transform: uppercase; }
    #product-actions .qty .txt { font-size: 16px; margin-right: 0.5em; text-align: center; width: 2em; }
    
    /* Description */
    #product-description { float: left; width: 35.22%; }
    
    /* Media */
    #product-media { float: left; margin-right: 3.53%; width: 35.22%; }
    #product-media .image { display: block; margin: 0 auto; width: 100%; }

/* Progress */
.progress {
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 18px;
    list-style: none;
    margin: 40px 0;
    text-align: center;
    padding: 1em;
}

.progress .current { font-weight: bold; }
.progress .current a { color: #000; }
.progress li { display: inline; margin: 0 1em; }

/* Social */
.social { font-size: 20px; list-style: none; margin-left: 0; }
.social a:hover { opacity: 0.7; text-decoration: none; }
.social li { display: inline; }

    /* Colors */
    .social-facebook .fa-stack-2x { color: #345598; }
    .social-linkedin .fa-stack-2x { color: #0B7bb6; }
    .social-twitter .fa-stack-2x { color: #13abef; }

/* Sort */
.sort { float: right; text-align: right; }
.sort .current a { color: #000; font-weight: bold; }
.sort p, .sort li, .sort ul { display: inline; margin: 0; }
.sort li { margin-left: 1em; }

/* Size chart */
.sizes { font-size: 14px; }
.sizes .disabled { opacity: 0.3; }
.sizes td, .sizes th { padding: 0.5em; text-align: center; width: 11%; }
.sizes td:first-child, .sizes th:first-child { text-align: left; width: 34%; }
.sizes th { background: #f0f0f0; }

/* Sharing tools */
#share { text-align: center; }
#share [class *= "addthis_button"] { float: none !important; }
.addthis_32x32_style .addthis_button_compact { vertical-align: top; }
	
/* Theme */
#theme { background: #fff; }
#theme .content { overflow: hidden; padding: 40px 20px 0; }
#theme h1 { color: #ed2f39; margin-bottom: 0.3em; }
#theme .image { text-align: center; }
#theme p { margin-bottom: 0.5em; }


/* Tippy box styles*/
#credit-code-tooltip + div { text-align:left;}


/* Widths
======================================================================*/
@media screen and (max-width: 1055px) {
    /* Header */
    #tagline { clear: left; float: none; font-size: 14px; text-align: left; width: auto; }
}

@media screen and (max-width: 870px) {
    /* Basics */
    body { font-size: 16px; }
    
    /* Layout */
    .content { padding: 0 15px; }
    .content-primary, .content-secondary { float: none; margin: 0; width: auto; }
    
    /* Content */
        /* Action buttons */
        .action { display: block; text-align: center; width: 100%; }
        
        /* Addresses */
        .addresses .card { height: auto; }
        .addresses > li { float: none; margin-right: 0; width: auto; }
        
        /* Browse */
        #browse-primary, #browse-secondary { float: none; width: auto; }
        #browse-secondary { background: #f0f0f0; border-radius: 5px; display: none; margin-bottom: 15px; padding: 15px; }
        
        /* Forms */
        .form dd.field, .form  dt .label { float: none; width: auto !important; }
        .form dt .label { font-weight: bold; }
        .form .field-single-line { width: 100%; }
        
            /* Cart */
            .cart .giftbox { margin: 0; }
            .cart .item, .cart .item-description, .cart .price, .cart .qty, .cart .subtotal { padding: 0; width: 100%; }
            .cart .item .thumb { float: left; margin: 3px 0 0 -33%; width: 25%; }
            .cart .qty p { display: inline; margin-right: 0.7em; }
            .cart .price { margin: 0.5em 0; }
            .cart .price p { display: inline; margin-left: 0.7em; }
            .cart .subtotal { position: absolute; right: 0; top: 10px; width: 20%; }
            .cart table, .cart tbody, .cart td, .cart tfoot, .cart th, .cart thead, .cart tr { display: block; width: 100%; }
            .cart tbody tr { padding: 10px 20%; width: 60%; }
            .cart tfoot td { text-align: left; }
            .cart tfoot tr { padding: 10px 20% 10px 0; width: 80%; }
            .cart tfoot .txt { display: block; margin: 0; width: 88%; }
            .cart thead .price, .cart thead .qty { display: none; }
            .cart thead .subtotal { top: 0; }
            .cart thead tr { border-top-width: 0; padding-top: 0; }
            .cart td, .cart th { border: 0; padding: 0; }
            .cart tr { border-top: 1px solid #ddd; clear: both; padding: 10px 0; position: relative; }
            #checkout-bottom { float: none; }
            #checkout-top { display: none; }
            
                /* Cart for choosing shipping options */
                .cart-shipping .item, .cart-shipping .item-address, .cart-shipping .item-description, .cart-shipping .item-shipping { text-align: left; width: 100%; }
                .cart-shipping .item-qty { position: absolute; right: 0; top: 10px; width: 20%; }
                .cart-shipping tbody .item-description, .cart-shipping tbody .item-shipping { padding-bottom: 5px; }
                .cart-shipping thead .item-address, .cart-shipping thead .item-description, .cart-shipping thead .item-shipping { display: none; }
                .cart-shipping thead .item-qty { top: 0; }
                
                    /* Summary */
                    .cart-shipping.cart-shipping-summary th { display: none; }
                    .cart-shipping.cart-shipping-summary tr { padding-right: 0; width: auto; }
                    .cart-shipping.cart-shipping-summary .item .thumb { margin-left: -25%; width: 20%; }
                
                /* Checkout */
                #checkout { clear: both; }
                #checkout .step { border: 2px solid #ccc; margin-bottom: -2px; padding: 15px; }
                #checkout-primary { float: none; width: auto; }
                #checkout-secondary { position: static; width: auto; }
            
            /* Progress forms */
            #progress-form { padding: 0; }
            #progress-form .form-nav { border: 1px solid #ddd; border-radius: 5px; float: none; margin: 0 0 20px; width: auto; }
            #progress-form .form-nav a { padding: 0.5em 1em; }
            #progress-form .form-nav li { margin: 0; }
            #progress-form .form-nav li:last-child { border: 0; }
            
            /* Search */
            #search { width: 100%; }
            
            /* Text boxes */
            .txt, .txt-med { width: 100%; }
        
        /* Grids */
        [class*="grid"] li { clear: none !important; margin-right: 2.7% !important; width: 31.53% !important; }
        [class*="grid"] li:nth-child(3n+3) { margin-right: 0 !important; }
        [class*="grid"] li:nth-child(3n+4) { clear: left !important; }
        
        /* Header */
        #header { border-bottom: 3px solid #ed2f39; padding-top: 10px; }
        #logo { width: 40%; }
        
        /* Navigation */
        #nav #nav-account li { margin: 0; }
        #nav-primary .extra { display: none; }
        #nav-toggle { margin-top: 0.5em; }
}

@media screen and (max-width: 680px) {
    /* Basics */
    body { font-size: 14px; }
    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    
    /* Layout */
    .c2l, .c2r, .c3l, .c3m, .c3r { float: none; margin: 0; width: auto; }
    #main { padding: 20px 0; }
    
    /* Content */
        /* Action */
        .action { display: block; font-size: 20px; text-align: center; width: 100%; }
        
        /* Artists */
        .artists li { padding: 0; }
        .artists .thumb { display: block; float: none; margin: 0 0 15px; width: 100%; }
        
        /* Callouts */
        [class *= "call"], [class *= "pull"] { float: none; margin: 0 0 10px; width: auto !important; }
        [class *= "pull"] { font-size: 16px; }
        
        /* Features */
        #subfeatures .panel, #subfeatures .panel:last-child { float: none; margin-bottom: 20px; padding: 0; width: auto; }
        #subfeatures .panel-content { padding: 15px; }
        
        /* Header */
        #logo { width: 65%; }
        #tagline { display: none; }
        
        /* Home */
        .home h2 { font-size: 20px; }
        
        /* Navigation */
        #nav .content { padding-right: 3.5em; }
        #nav .extra, #nav #member, #nav #nav-total { display: none; }
        #nav #nav-account { margin-right: -2.8em; }
        #nav-toggle { margin: 0; }
        
        /* Product detail */
        #product-actions, #product-description, #product-media { float: none; margin: 0 0 20px; width: auto; }
        
        /* Share */
        #share .fa { font-size: 26px; }
}