/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ *

/* ==========================================================================
    style colors
   ========================================================================== */

.cat-sec li a {
    color: #fff;
    background: #3B9C9C;
    border: 2px solid #009999;
}
.cat-sec li a:hover {
    color: #009999;
    background: #fff;
    border: 2px solid #009999;
}

.main-h {
    color: #A52A2A;
}
.dcoupon {
    background: #F5FC7A;
}
.coupon_btn {
    color: #A52A2A;
}

.about-h {
    color: #A52A2A;
    border-left: 3px solid #f5c193;
    border-bottom: 3px solid #f5c193;
    background: #ffffe0;
}
.about-h .toggle-button {
    color: #fff;
    background: #f5c193;
}

/* =====================
    MOBILE: Categories
   ===================== */

.cat-sec {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    width: 90%;
}
.cat-sec ul {
    margin: 0 auto;
    padding: 0;
    
    list-style-type: none;
    text-align: center;
    word-break: keep-all;
}

.cat-sec li {
    width: 38%;
    min-width: 180px;
    margin: 0 auto;
    text-align: center;
}
.cat-sec li a {
    display: block;
    margin: 10px;
    padding: 5px;
    
    height: 120px;

    text-align: center;
    text-decoration: none;
    font-weight: bold;
    vertical-align: middle;
}
.cat-sec li p {
    display: block;
    margin: 0;
    padding: 0;
    height: 60%;
    font-size: 0.8em;
    vertical-align: middle;
}
.cat-sec li img {
    display: block;
    margin: 0 auto;
    height: 30%;
    vertical-align: middle;
}

/* ==========================================================================
    detail styles
   ========================================================================== */

article {
    position: relative;
    display: block;
    margin: 0;
    padding: 10px;
}

.dcoupon {
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.dcoupon a img {
	float:left;
}
.dcoupon a div {
	display:inline-block;
	word-break: keep-all;
	margin: 3px 5px;
}
.main-h {
    margin: 0 10px;
    font-size: 1em;
}
.main-s {
    margin: 0 10px;
    padding: 10px;
    font-size: 0.8em;
}
.main-s div {
    display: inline-block;
}

.dcoupon {
    margin: 10px 5%;
    padding: 8px;
}
.coupon_btn {
    display: block;
    text-decoration: none;
}
.coupon_btn img {
    margin: 0 10px;
    height: 28px;
}
.coupon_btn div {
    display: inline;
    word-break: keep-all !important;
}

.about-h {
    float: left;
    width:100%;
    margin: 5px 10px;
    pading: 10px;
}
.about-h div{
    margin: 5px 10px;
}
.about-h .toggle-button {
    float: right;
    margin: 0;
    padding: 5px;
    text-decoration: none;
}

.about-d {
    margin: 0 10px 10px;
    padding: 10px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 380px) {
    
/* ====================
    INTERMEDIATE: Menu
   ==================== */

    .cat-sec ul {
        position: relative;
        left: 50%;
        float: left;
    }

    .cat-sec li {
        position: relative;
        left: -50%;
        float: left;
        width: 33%;
        min-width: 140px;
    }
    
/* ========================
    INTERMEDIATE: IE Fixes
   ======================== */
    
    .cat-sec ul li {
        display: inline;
    }
    
/* ========================
    INTERMEDIATE: Main
   ======================== */

    .cat-sec li p {
        height: 66%;
    }
}

@media only screen and (min-width: 700px) {

/* ============
    WIDE: Main
   ============ */

    .main {
        display: table;
    }
    
    .cat-sec li p {
        padding-top: 5px;
    }
}

@media only screen and (min-width: 960px) {
    
    .cat-sec li p {
        padding-top: 5px;
        height: 50%;
    }
}