/*
// range intro
*/

#ranges-intro{
    padding: 0 130px 1em 0;
    border-bottom: solid 1px #4b4b50;
    margin: 0 0 10px;
    font-size: 14px;
}


#ranges-intro h3{
    margin: 0 0 10px;
    font-family: 'ZurichRoman', Verdana, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal;
}

#ranges-intro h3 strong{
    font-family: 'ZurichBold', Verdana, Arial, Helvetica, Sans-Serif; font-style: normal; font-weight: normal;
}


#ranges-intro p{
    margin: 0 0 10px;
}

/*
// ranges
*/

#ranges{
    
}

#ranges header{
    margin: 0 0 15px;
    position: relative;
    z-index: 3;
}

#ranges h3{
    margin: 0;
    text-transform: uppercase;
    font-size: 14px;
    padding: 8px 15px;
    color: #fff;
    background: #9D9FA2;
    cursor: pointer;
    line-height: 18px;
    height: 18px;
    z-index: 2;
    position: relative;
}

#ranges .range{
    margin-bottom: 40px;
    position: relative;
    min-height: 1px;
    z-index: 1;
}

#ranges .range:hover{
    z-index: 2;
}

#ranges .range-desc{
    position: absolute;
    font-size: 11px;
    background: #ff0000;
    color: #fff;
    padding: 15px;
    left: 0;
    top: 34px;
    display: none;
    width: 430px;
    box-shadow: 0 0 7px rgba(0,0,0,.4);
    z-index: 1;
}

#ranges .lastinline .range-desc{
    left: auto;
    right: 0;
}

/* non transitions */
@media (min-width: 601px) {
    #ranges .titleover .range-desc {
        display: block;
    }
}
@media (max-width: 600px) {
    #ranges .range.desc-open--mobile .range-desc {
        display: block;
    }
}

/* transitions reset */
.csstransitions #ranges .range-desc{
    -webkit-transition: opacity 100ms ease-out;
	-moz-transition: opacity 100ms ease-out;
	-o-transition: opacity 100ms ease-out;
	-ms-transition: opacity 100ms ease-out;	
	transition: opacity 100ms ease-out;
    display: block;
    overflow: hidden;
    opacity: 0;
    width: 0;
    height: 0;
    padding: 0;
}

/* transition */
@media (min-width: 601px) {
    .csstransitions #ranges .titleover .range-desc {
        opacity: 1;
        height: auto;
        width: auto;
        padding: 15px;
    }
}
@media (max-width: 600px) {
    .csstransitions #ranges .range.desc-open--mobile .range-desc {
        opacity: 1;
        height: auto;
        padding: 15px;
    }
}

/* 
// range list
*/

#ranges ul{
    margin: 0;
    font-size: 10px;
    text-transform: uppercase;
    overflow: hidden;
    position: relative;
    z-index: 2;
} 

#ranges li{
    background: none;
    padding: 0;
    list-style: none;
}

#ranges a{
    display: block;
    padding: 5px 5px 5px 15px;
    color: #4b4b50;
    background-image: url(ranges.a.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #9D9FA2;
}

#ranges a:hover{
    background-position: 0 -80px;
    text-decoration: none;
}

#ranges button {
    -moz-appearance: none;
    -webkit-appearance: none;
    background-image: url(ranges.a.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: #9D9FA2;
    border: 0;
    border-radius: 3px;
    box-sizing: border-box;
    color: #4b4b50;
    display: block;
    font: inherit;
    outline: 0;
    padding: 5px 5px 5px 15px;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

#ranges button:hover {
    background-position: 0 -80px;
    text-decoration: none;
}

#ranges button:focus {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.1);
}

#ranges button * {
    pointer-events: none;
}

#ranges .range-kraft h3,
#ranges .range-kraft .range-desc,
#ranges .range-kraft a{ background-color: #ab33a6; }
#ranges .range-kraft .range-toggle:before { color: #ab33a6; }

#ranges .range-coated h3,
#ranges .range-coated .range-desc,
#ranges .range-coated a{ background-color: #0078BE; }
#ranges .range-coated .range-toggle:before { color: #0078BE; }

#ranges .range-uncoated h3,
#ranges .range-uncoated .range-desc,
#ranges .range-uncoated a{ background-color: #640064; }
#ranges .range-uncoated .range-toggle:before { color: #640064; }

#ranges .range-corporate h3,
#ranges .range-corporate .range-desc,
#ranges .range-corporate a{ background-color: #FF0000; }
#ranges .range-corporate .range-toggle:before { color: #FF0000; }

#ranges .range-digital h3,
#ranges .range-digital .range-desc,
#ranges .range-digital a{ background-color: #143C8C; }
#ranges .range-digital .range-toggle:before { color: #143C8C; }

#ranges .range-boards h3,
#ranges .range-boards .range-desc,
#ranges .range-boards a{ background-color: #000; }
#ranges .range-boards .range-toggle:before { color: #000; }

#ranges .range-adhesive h3,
#ranges .range-adhesive .range-desc,
#ranges .range-adhesive a{ background-color: #FF9100; }
#ranges .range-adhesive .range-toggle:before { color: #FF9100; }

#ranges .range-specialties h3,
#ranges .range-specialties .range-desc,
#ranges .range-specialties a{ background-color: #008741; }
#ranges .range-specialties .range-toggle:before { color: #008741; }

#ranges .range-carbonless h3,
#ranges .range-carbonless .range-desc,
#ranges .range-carbonless a{ background-color: #8cc800; }
#ranges .range-carbonless .range-toggle:before { color: #8cc800; }

#ranges .range-api-metallics  h3,
#ranges .range-api-metallics  .range-desc,
#ranges .range-api-metallics  a{ background-color: #8cc800; }
#ranges .range-api-metallics .range-toggle:before { color: #8cc800; }

#ranges .range-metallics  h3,
#ranges .range-metallics  .range-desc,
#ranges .range-metallics  a{ background-color: #008741; }
#ranges .range-metallics .range-toggle:before { color: #008741; }

#ranges .range-pigments h3,
#ranges .range-pigments .range-desc,
#ranges .range-pigments a{ background-color: #FF9100; }
#ranges .range-pigments .range-toggle:before { color: #FF9100; }

#ranges .range-holographic-spec h3,
#ranges .range-holographic-spec  .range-desc,
#ranges .range-holographic-spec  a{ background-color: #143C8C; }
#ranges .range-holographic-spec .range-toggle:before { color: #143C8C; }

#ranges .range-dry-toner-process h3,
#ranges .range-dry-toner-process  .range-desc,
#ranges .range-dry-toner-process a{ background-color: #df34b1; }
#ranges .range-dry-toner-process .range-toggle:before { color: #df34b1; }

#ranges .range-hp-indigo h3,
#ranges .range-hp-indigo  .range-desc,
#ranges .range-hp-indigo  a{ background-color: #2d47aa; }
#ranges .range-hp-indigo .range-toggle:before { color: #2d47aa; }

#ranges .range-toggle {
    display: none;
}

@media (max-width: 600px) {
    #ranges {
        height: auto !important;
        overflow: visible !important;
    }

    #ranges .range {
        left: auto !important;
        margin-bottom: 20px;
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }

    #ranges header {
        margin: 0;
    }

    #ranges h3 {
        border-radius: 3px;
        padding: 12px 15px;
    }

    #ranges .range-toggle {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        border: 0;
        box-sizing: border-box;
        display: block;
        font: inherit;
        font-size: 14px;
        margin: 0;
        padding: 12px 0;
        text-align: left;
        width: 100%;
    }

    #ranges .range-toggle:before {
        content: '\f067';
        display: inline-block;
        font-family: 'FontAwesome';
        width: 1.25em;
    }

    #ranges .range.list-open--mobile .range-toggle:before {
        content: "\f068";
    }

    #ranges ul {
        display: none;
    }

    #ranges .range.list-open--mobile ul {
        display: block;
    }

    .csstransitions #ranges .titleover .range-desc {
        border-radius: 0 0 3px 3px;
        box-shadow: 0 8px 3px -6px rgba(0,0,0,.5);
        box-sizing: border-box;
        left: 0;
        right: 0;
        width: auto;
    }

    #ranges a {
        border: solid #fff;
        border-width: 3px 0;
        font-size: 11px;
    }
}