﻿@font-face {
    font-family: 'Gotham Book';
    src: url('../fonts/gotham-book-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Poppins Medium';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins Bold';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Poppins Regular';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
}

body {
    background-color: #f0f2f5;
}

#the-goods-section .the-goods-card {
    background-color: #f0f2f5;
}

.the-goods-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    /*min-height: 193px;*/
}

.the-goods-item {
    padding: 0;
    margin: 0 15px;
    position: relative;
}

    .the-goods-item .the-goods-btn {
        background-color: #c01f3e;
        height: 42px;
        width: 90%;
        border-radius: 5px;
        padding: 0;
        position: absolute;
        top: 87%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

        .the-goods-item .the-goods-btn a {
            color: #FFF;
            letter-spacing: 2px;
            font-family: "Poppins Bold", "Arial";
            text-transform: uppercase;
            text-align: center;
            vertical-align: middle;
            font-size: 13px;
            padding-top: 10px;
            width: 100%;
            position: absolute;
            text-decoration: none;
        }

#banner-section {
    background-color: #f0f2f5;
}

    #banner-section .banner-card {
        min-width: 320px;
        min-height: auto;
    }

        #banner-section .banner-card .banner-item {
            max-width: 414px;
            width: 100%;
            height: auto;
        }

    #banner-section img {
        width: 100%;
        height: auto;
        padding: 15px;
    }

.lookbook-card .lookbook-item {
    min-width: 258px;
    margin-right: 16px;
    border-radius: 5px;
    scroll-behavior: smooth;
}

.lookbook-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
    min-height: 193px;
}

.lookbook-item span {
    font-family: "Poppins Medium", "Arial";
    font-size: 14px;
    text-align: left !important;
}

.lookbook-item p.caption {
    font-family: "Poppins Regular", "Arial";
    font-size: 14px;
    text-align: left !important;
    color: #000;
    padding: 0;
    margin-top: 10px;
}

#lookbook-section-portrait {
    background-color: #f0f2f5;
}

    #lookbook-section-portrait .lookbook-card {
        min-width: 320px;
        min-height: auto;
        background-color: #f0f2f5;
        padding: 0;
        display: flex;
        overflow-y: scroll;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        box-orient: vertical;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
        display: -o-box;
        display: box;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-points-y: repeat(100%);
        -ms-scroll-snap-points-y: repeat(100%);
        scroll-snap-points-y: repeat(100%);
        -webkit-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        scroll-snap-destination: 0% 100%;
    }

        #lookbook-section-portrait .lookbook-card .lookbook-item {
            min-width: 258px;
            margin: 0 auto;
        }

    #lookbook-section-portrait p.section {
        font-size: 16px;
        color: #000;
        text-align: center;
        font-weight: bold;
        font-family: "Poppins Regular", "Arial";
        letter-spacing: 1px;
        margin-top: 15px;
        background-image: linear-gradient(white, #f0f2f5);
    }

#lookbook-section-landscape {
    position: relative;
    background-color: #fff;
    height: auto;
}

    #lookbook-section-landscape .container-fluid {
        background-color: #fff;
    }

    #lookbook-section-landscape .lookbook-card {
        display: flex;
        min-width: 100%;
        background-color: #FFF;
        overflow-x: auto;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        -moz-box-orient: horizontal;
        -ms-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        -o-box-orient: horizontal;
        box-orient: horizontal;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
        display: -o-box;
        display: box;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-points-x: repeat(300px);
        -ms-scroll-snap-points-x: repeat(300px);
        scroll-snap-points-x: repeat(300px);
        -webkit-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
    }

        #lookbook-section-landscape .lookbook-card::-webkit-scrollbar {
            display: none;
        }

        #lookbook-section-landscape .lookbook-card .lookbook-item {
            max-width: 258px;
            margin-right: 16px;
            border-radius: 5px;
            scroll-behavior: smooth;
        }

    #lookbook-section-landscape p.section {
        font-size: 13px;
        color: #bf0d3e;
        background-color: #FFF;
        padding-top: 20px;
        font-family: "Poppins Regular", "Arial";
        letter-spacing: 1px;
        width: 200px;
        margin-left: 15px;
    }

    #lookbook-section-landscape p.view-all {
        position: absolute;
        right: 16px;
        top: 16px;
    }

        #lookbook-section-landscape p.view-all a {
            font-size: 13px;
            color: #000;
            text-decoration: none;
            font-family: "Poppins Regular", "Arial";
            letter-spacing: 1px;
        }

#rewards-section {
    text-align: center;
    background-color: #f0f2f5;
    padding: 30px 0;
}

    #rewards-section .container {
        background-color: #fff;
    }

    #rewards-section img {
        padding-top: 30px;
    }

    #rewards-section a span {
        font-family: "Poppins Bold", "Arial";
        font-size: 14px;
        color: #000;
        text-decoration: none;
    }

    #rewards-section p {
        margin: 20px 28px 30px 28px;
        font-family: "Poppins Regular", "Arial";
        font-size: 14px;
        letter-spacing: .5px;
    }

#inspiration-section {
    background-color: #f0f2f5;
    padding-top: 30px;
}

    #inspiration-section .container-fluid {
        background-color: #fff;
    }

    #inspiration-section .inspiration-card {
        display: flex;
        min-width: 100%;
        min-height: 150px;
        overflow-x: auto;
        align-items: flex-start;
        flex-wrap: nowrap;
        -moz-box-orient: horizontal;
        -ms-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        -o-box-orient: horizontal;
        box-orient: horizontal;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
        display: -o-box;
        display: box;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-points-x: repeat(300px);
        -ms-scroll-snap-points-x: repeat(300px);
        scroll-snap-points-x: repeat(300px);
        -webkit-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
    }

        #inspiration-section .inspiration-card::-webkit-scrollbar {
            display: none;
        }

    #inspiration-section .inspiration-card {
        padding-right: 16px;
        text-align: center;
    }

        #inspiration-section .inspiration-card .inspiration-item {
            max-width: 117px;
            margin-right: 16px;
            position: relative;
            height: 50%;
            scroll-behavior: smooth;
        }

    #inspiration-section .inspiration-item img {
        width: 100%;
        height: auto;
        border-radius: 5px;
        max-width: 193px;
    }

    #inspiration-section .inspiration-item p.caption {
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
    }

        #inspiration-section .inspiration-item p.caption a {
            font-family: "Poppins Regular", "Arial";
            color: #FFF;
            text-decoration: none;
            letter-spacing: 1px;
            font-weight: bold;
            font-size: 18px;
            text-shadow: 2px 2px 4px #333;
        }

    #inspiration-section p.section {
        font-size: 13px;
        color: #bf0d3e;
        padding-top: 20px;
        font-family: "Poppins Regular", "Arial";
        letter-spacing: 1px;
    }

        #inspiration-section p.section a {
            color: #fff;
            font-size: 16px;
        }

/* Start - Inspiration Carousel for Android Only */
#carousel-section {
    background-color: #f0f2f5;
    padding-top: 30px;
}
 
#carousel-section .container-fluid {
    background-color: #fff;
    /* min-width: 100%; */
    /* overflow-x: auto; */
}

#carousel-section .carousel-inner {
    //padding-left: 15px;
    display: flex;
    min-width: 100%;
    height: 150px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

#carousel-section .carousel-caption {
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
}

    #carousel-section .carousel-caption a {
        font-family: "Poppins Regular", "Arial";
        color: #FFF;
        text-decoration: none;
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 18px;
        text-shadow: 2px 2px 4px #333;
    }

#carousel-section p {
    font-size: .8em;
    color: #bf0d3e;
    padding-top: 20px;
    padding-left: 10px;
    font-family: "Poppins-Regular", "Arial";
    letter-spacing: 1px;
}

#carousel-section img {
    margin-bottom: 20px;
    width: 117px;
    height: 117px;
    border-radius: 5px;
}
/* End - Inspiration Carousel for Android Only */

.blog-card .blog-item {
    min-width: 275px;
    margin-right: 16px;
    background-color: #FFF;
    //height: 200px;
    border-radius: 5px;
    scroll-behavior: smooth;
}

.blog-item img {
    /* max-width: 100%; */
    width: 100%;
    height: auto;
    border-radius: 5px 5px 0 0;
}

.blog-item p.date {
    max-width: 240px;
    color: #aaa;
    font-size: 12px;
    font-family: "Poppins Regular", "Arial";
    padding: 10px 0 0 10px;
    display: none;
}

.blog-item p.title {
    width: 100%;
    font-size: 14px;
    font-family: "Poppins Bold", "Arial";
    font-weight: bold;
    padding: 0 8px 20px 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top:20px;
}

    .blog-item p.title a {
        color: #000;
        text-decoration: none;
    }

#blog-section-portrait {
    background-color: #f0f2f5;
}

    #blog-section-portrait .blog-card {
        min-width: 320px;
        min-height: auto;
        padding: 0;
        max-width: 100%;
        background-color: #f0f2f5;
        display: flex;
        overflow-y: scroll;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: column;
        -moz-box-orient: vertical;
        -ms-box-orient: vertical;
        -webkit-box-orient: vertical;
        -o-box-orient: vertical;
        box-orient: vertical;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
        display: -o-box;
        display: box;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-points-y: repeat(100%);
        -ms-scroll-snap-points-y: repeat(100%);
        scroll-snap-points-y: repeat(100%);
        -webkit-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        scroll-snap-destination: 0% 100%;
    }

        #blog-section-portrait .blog-card .blog-item {
            /* width: 100%; */
            /* max-width: 410px; */
            min-width: 275px;
            /* height: auto; */
            margin: 15px auto;
        }
    /*
            #blog-section-portrait .blog-card.blog-item img {
                max-width: 100%;
                height: auto;
                border-radius: 5px 5px 0 0;
            }
		*/

    #blog-section-portrait p.section {
        font-size: 1.0em;
        color: #000;
        text-align: center;
        font-weight: bold;
        font-family: "Poppins Regular", "Arial";
        letter-spacing: 1px;
        margin-top: 15px;
        background-image: linear-gradient(white, #f0f2f5);
        display: none;
    }

#blog-section-landscape {
    background-image: linear-gradient(white, #f0f2f5);
    position: relative;
    height: auto;
}

    #blog-section-landscape .blog-card {
        display: flex;
        min-width: 100%;
        background-color: #f0f2f5;
        //min-height: 215px;
        overflow-x: auto;
        align-items: flex-start;
        flex-wrap: nowrap;
        flex-direction: row;
        -moz-box-orient: horizontal;
        -ms-box-orient: horizontal;
        -webkit-box-orient: horizontal;
        -o-box-orient: horizontal;
        box-orient: horizontal;
        display: -moz-box;
        display: -ms-box;
        display: -webkit-box;
        display: -o-box;
        display: box;
        -webkit-overflow-scrolling: touch;
        -webkit-scroll-snap-points-x: repeat(300px);
        -ms-scroll-snap-points-x: repeat(300px);
        scroll-snap-points-x: repeat(300px);
        -webkit-scroll-snap-type: mandatory;
        -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
        height: auto;
        padding: 0;
    }

        #blog-section-landscape .blog-card::-webkit-scrollbar {
            display: none;
        }


        #blog-section-landscape .blog-card .blog-item {
            max-width: 275px;
            margin-right: 16px;
            background-color: #FFF;
            height: auto;
            border-radius: 5px;
            scroll-behavior: smooth;
        }

    #blog-section-landscape p.section {
        font-size: 13px;
        color: #bf0d3e;
        padding-top: 20px;
        text-transform: uppercase;
        font-family: "Poppins Regular", "Arial";
        letter-spacing: 1px;
        width: 200px;
    }

    #blog-section-landscape p.view-all {
        position: absolute;
        right: 16px;
        top: 16px;
    }

        #blog-section-landscape p.view-all a {
            font-size: 13px;
            color: #000;
            text-decoration: none;
            font-family: "Poppins Regular", "Arial";
            letter-spacing: 1px;
        }

/* Blog Page */
#single-post {
    font-family: "Poppins Regular";
    background-color: #FFF;
}

.featured-img {
    max-width: 100%;
    height: auto;
}

    .featured-img img {
        width: 100%;
        height: auto;
       /* min-height: 260px; */
    }

.blog-count {
    padding-left: 10px;
    color: UIColor(red:0.75, green:0.05, blue:0.24, alpha:1);
}

.blog-title {
    margin: 20px 16px;
    font-size: 24px;
    padding: 0;
    line-height: 25pt;
    color: #000;
    font-family: "Poppins Bold";
    letter-spacing: 1px;
}

.blog-date {
    padding: 0;
    font-size: 14px;
    line-height: 14px;
    margin: 40px 16px;
    display: none;
}

.blog-share {
    width: 20px;
    position: relative;
    top: -65px;
    left: 365px;
    text-align: right;
}

    .blog-share img {
        width: 100%;
        height: autp;
    }

.blog-post-content {
    position: relative;
    /* top: -30px; */
}

    .blog-post-content p {
        padding: 0;
        margin: 30px 16px;
        font-size: 16px;
    }

        .blog-post-content p img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }

strong {
    font-weight: bold;
    font-family: 'Poppins Bold';
}
