html, body {
    width:100%;
    height: 100%;
    color:#272727;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
    margin: 0;
    background-color:#fff;
}

a {
    text-decoration: none;
    color:#272727;
}

h1, h2, h3 {
 font-family: 'Montserrat', sans-serif;   
}

h1 {
    font-weight: 800;
}

p {
    line-height: 1.6;
}

.body_container {
    width: 1100px;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0 auto 10px;
}


.header {
    max-width:100%;
    padding:40px 18px 8px;
}

.bg_image {
    background:linear-gradient(
      rgba(35, 40, 35, 0.6), 
      rgba(35, 40, 35, 0.6)
    ),
    /* bottom, image */
    url(images/allstickers_banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}

#logo_wrap {
    width:auto;
    max-width: 220px;
    display: block;
    margin:auto;
}

#logo_wrap img {
    width:100%;
    height: auto;
}

#nav {
    width:auto;
    text-align: center;
    margin:12px auto 0;
}

#nav a {
    margin:0 8px;
    color:#fff;
    font-size: 26px;
}

#nav a:hover,
.nav_current {
    box-shadow: inset 0 -2px 0 #EFA714;
}

.inner_padding {
    padding:0 10px;
}

.content {
    width:100%;
    margin:20px auto 120px;
    box-sizing: border-box;
}

.content_wrap {
    font-size:0;
}

.content a {
    box-shadow: inset 0 -2px 0 #EFA714;
}

.content a:hover {
    background: #EFA714;
}

.col_half, .col_3 {
    display: inline-block;
    width:50%;
    margin:auto;
    position: relative;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 4px;
}

.tile_button {
    width:100%;
}

.title_divider h3 {
    text-transform: uppercase;
    font-size: 24px;
    background-color: #EFA714;
    text-align: center;
    font-weight: normal;
    padding: 6px 0;
    color: #fff;
}

.content_box {
    box-sizing: border-box;
    width:100%;
    margin:auto;
    max-width: 300px;
    margin-bottom: 14px;
    /* new */
    /*padding: 10px;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0px 0px 2px #3333333d;*/
}

.tile_button .content_box {
    max-width: 94%;
    margin-bottom: 8px;
}


.content_box .img_wrap h2 {
    font-size: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}


.content_box .img_wrap {
    background-color: #f4f4f4;
    height: 100px;
    padding: 40px;
    /*test*/
    position: relative;
}

.content_box .button_stickers {
    height: 40px;
}

.content_box .img_wrap img {
   max-width: 60%;
    max-height: 60%;
    height: auto;
    margin: auto;
    display: block;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}

.content_box .img_wrap:hover img {
   display:none;
}


/**********************
* $Tile Box Images
***********************/

.button_stickers,
.button_pins,
.button_patches {
    background-image: url(images/stickers_button.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover;
}

.button_stickers:hover,
.button_pins:hover,
.button_patches:hover {
    opacity: 0.7;
}

.button_pins {
    background-image: url(images/pins_button.jpg);
}

.button_patches {
    background-image: url(images/patches_button.jpg);
}

.content_box .s1 {
    -webkit-transition: background-image 0.17s; /* Safari */
    transition: background-image 0.17s;
}

.content_box .s1:hover {
    background-image: url(images/r-1.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.content_box .s2:hover {
    background-image: url(images/r-2.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s3:hover {
    background-image: url(images/r-3.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s4:hover {
    background-image: url(images/r-4.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s5:hover {
    background-image: url(images/r-5.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s6:hover {
    background-image: url(images/r-6.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s7:hover {
    background-image: url(images/r-7.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s8:hover {
    background-image: url(images/r-8.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s9:hover {
    background-image: url(images/r-9.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s10:hover {
    background-image: url(images/r-10.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s11:hover {
    background-image: url(images/r-11.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s12:hover {
    background-image: url(images/r-12.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s13:hover {
    background-image: url(images/r-13.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s14:hover {
    background-image: url(images/r-14.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s15:hover {
    background-image: url(images/r-15.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s16:hover {
    background-image: url(images/r-16.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s17:hover {
    background-image: url(images/r-17.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}
.content_box .s18:hover {
    background-image: url(images/r-18.jpg);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.content_box .s19:hover {
    background-image: url(images/r-19.png);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.content_box .s20:hover {
    background-image: url(images/r-20.png);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.content_box .s21:hover {
    background-image: url(images/r-21.png);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}

.content_box .s22:hover {
    background-image: url(images/r-22.png);
    background-color: transparent;
    background-position: center;
    background-size: cover;
}



.cb_left, .cb_right {
    float:none;
}

.spacing_middle {
    margin:0 4px auto;
}


.content_box > .product_title {
    display: block;
    font-size: 18px;
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-style: italic;
    text-align: center;
}

.content_box > .product_title span {
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    color:#EFA714;
}



.divider {
    text-align: center;
    width: 100%;
    height:2px;
    background:#777;
    display: block;
    margin:auto;
}

hr {
    max-width: 1100px;
    display:block;
    margin:auto;
    padding-right: 6px;
}

.footer {
    position: static;
    bottom:0;
    left:0;
    right:0;
    text-align: center;
    height: 90px;
}

.footer_nav {
    margin:12px 0;
}

.footer_nav a {
    font-size: 8pt;
    margin: 0 12px;
}

.footer_nav a:hover {
    background: #EFA714;
}

.footer_social {
    margin:20px auto;
}

.footer_social a {
 box-shadow: none;   
}

.footer_social a:hover {
    background: transparent;
 box-shadow: none;   
    opacity: 0.4;
}

.footer_social img {
    width:34px;
    height: auto;
}

.footer .footer_copyright {
    font-size:12px;
}

@media (min-width:768px) {
    
#logo_wrap {
    width:30%;
    max-width: 220px;
    display: inline-block;
}

.content_box {
    margin-bottom: 44px;
    max-width: 340px;
}
    
.content_box .img_wrap {
    height: 200px;
}
    
.content_box .button_stickers,
.content_box .button_pins,
.content_box .button_patches {
    height: 100px;
}

.tile_button .content_box {
    margin-bottom: 0;
}    
    
#nav {
    width:68%;
    text-align: right;
    font-weight: bold;
    display: inline-block;
}

#nav a {
    font-size: 16px;
}    
    
.col_half {
    width:50%;
}
    
    .col_3, .tile_button {
    width:33.33%;
}
    
.cb_left {
    float:left;
}

.cb_right {
    float:right;
}
}

@media (min-width:992px) {
    .col_half, .col_3, .tile_button {
    padding: 0;
}
}