/*! 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;
}

.sec-coupon a {
    color: #A52A2A !important;
    background: #F5FC7A !important;
    border: 2px solid #F5FC7A !important;
}
.sec-coupon a:hover {
    border: 2px solid #009999 !important;
}

.about-sec {
    color: #A52A2A;
    border: 3px solid #F75D59;
    background: #fffaf0;
}

.about-h .toggle-button {
    color: #fff;
    background: #F75D59;
}

.info-sec {
    color: #A52A2A;
    border: 3px solid #FBBBB9;
}
.info-sec h3 {
    color: #ff6666;
}

/* =====================
    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;
}
.coupon_btn img {
    margin: 0 10px;
    height: 26% !important;
}

/* ==========================================================================
    detail styles
   ========================================================================== */
.about-sec,
.info-sec {
    margin: 20px 5%;
}
/*.sec-coupon {
    padding: 8px;
}
.coupon_btn {
    display: block;
    text-decoration: none;
}

.coupon_btn div {
    display: inline-block;
    text-align: center;
    word-break: keep-all;
    font-size: 0.8em;
}*/

.about-sec {
    padding: 0;
}
.about-h h1 {
    float: left;
    margin: 5px 10px;
    font-size: 0.8em !important;
}
.about-h .toggle-button {
    float: right;
    margin: 0;
    padding: 5px;
    text-decoration: none;
}

.about-d {
    margin: 10px;
    padding: 5px;
    font-size: 0.8em !important;
}
.about-d h2 {
    font-size: 1em !important;
}

.info-sec {
    padding: 10px 5px 0 5px;
    line-height: 0.8em;
}
.info-sec h3 {
    margin: 0;
    padding: 0 10px;
    font-size: smaller;
}

.info-d {
    margin: 3px;
    padding: 3px 3px;
    font-size: 0.8em;
    line-height: 1.4;
}
.info-d p {
    margin-left: 3px;
    word-break: break-all;
}
.info-img {
    float: left;
    display: inline;
    margin-right: 5px;
    padding: 0;
    height: 14px;
    vertical-align: text-bottom;
}

/* ==========================================================================
   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: CSS3 Effects
   ==================== */
    .sec-coupon,
    .about-sec,
    .info-sec {
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }

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

    .main {
        display: table;
    }
    .main article {
        display: table-cell;
        float: left;
        width: 70%;
        width: -webkit-calc(100% - 300px);
        width: -moz-calc(100% - 300px);
        width : calc(100% - 300px);
        
        margin: 0;
        padding: 0;
    }
    .main aside {
        display: table-cell;
        float: right;
        width: 300px;
        margin: 0;
        padding: 0;
    }
    
    .cat-sec li p {
        padding-top: 5px;
    }
}

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