@charset "utf-8";

/* DC_style */
.two-column,
.three-column {
    width: 100%;
    max-width: 587px !important;
}

.smoothie-glossary-outer .cards-holder{
    width: 100%;
    box-sizing: border-box;
}
.modal-body .two-column,
.modal-body .three-column{
    max-width: 742px !important;
}
#smoothie-modal .visible-smoothie-card p.bottom-text,
.cards-holder .three-column .smoothie-card__content .content p.bottom-text,
.bottom-carousel .three-column .smoothie-card__content .content p.bottom-text{
    width: 100%;
}
@media only screen and (min-width: 1441px){
    .modal-body .two-column,
    .modal-body .three-column{
        max-width: 855px !important;
    } 
}
@media only screen and (min-width: 1441px) and (min-height: 901px){
    .two-column,
    .three-column{
        max-width: 715px !important;
    } 
     
    .modal-body .smoothie-card-wrapper .content {
        padding-top: 50px;
        height: 429px;
    }
    #smoothie-modal .visible-smoothie-card p.bottom-text {
        bottom: -72px;
    }
    #smoothie-modal .visible-smoothie-card .smoothie-card__footer {
        padding: 99px 20px 8px 20px;
    }
    #smoothie-modal .visible-smoothie-card .smoothie-card__footer {
        padding: 14px 20px 8px 20px;
    }
    .cards-holder .smoothie-card__footer {
        padding: 58px 20px 8px 20px;
    }
    #smoothie-modal .visible-smoothie-card p.bottom-text {
        bottom: 18px;
    }
    .cards-holder .three-column .smoothie-card__content .content p.bottom-text {
        bottom: -30px;
    }
    .bottom-carousel .three-column .smoothie-card__content .content p.bottom-text,
    .bottom-carousel .two-column .smoothie-card__content .content p.bottom-text{
        bottom: 9px;
        width: 100%;
    }
    .bottom-carousel .smoothie-card-wrapper .content {
        padding-top: 33px;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__content,
    .bottom-carousel .right-grid .two-column .smoothie-card__content {
        min-height: 351px;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__footer,
    .bottom-carousel .right-grid .two-column .smoothie-card__footer {
        padding: 9px 20px 6px 20px;
    }
}
@media (max-width: 1000px){
    .smoothie-glossary-outer .tl-container {
        height: 110vw;
    }
    .smoothie-glossary-outer .img-holder{
        margin-top: 7%;
    }
    .smoothie-glossary-outer .cards-holder li:nth-child(2),
    .smoothie-glossary-outer .cards-holder li:nth-child(3){
        margin-top: -29%;
    }
    .slick-slider .slick-list .three-column,
    .slick-slider .slick-list .two-column {
        max-width: 767px !important;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__content,
    .bottom-carousel .right-grid .two-colum .smoothie-card__content{
        min-height: 46vw;
    }
    .bottom-carousel .three-column .smoothie-card__content .content p.bottom-text,
    .bottom-carousel .two-colum .smoothie-card__content .content p.bottom-text {
        bottom: 13px;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__footer,
    .bottom-carousel .right-grid .two-colum .smoothie-card__footer {
        padding: 2% 20px 8px 20px;
    }
    .modal-body .smoothie-card-wrapper .content {
        height: 37vw;
    }
    #smoothie-modal .modal-body .visible-smoothie-card p.bottom-text {
        bottom: 1%;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .smoothie-card__footer {
        padding: 2.3% 0;
    }
}
@media (max-width: 800px){
    .three-column,
    .two-column{
        width: 78%;
        background-size: 100%;
    }
    .smoothie-glossary-outer .tl-container {
        height: 120vw;
    }
}


/************************* 開始做手機尺寸 *************************/
/* @media (max-width: 500px){
    
    .two-column,
    .three-column {
        width: 85%;
    }
    .three-column {
        background: url('../images/smoothie-three-column-border_heightLarge.png') no-repeat;
        background-size: 100%;
    }
    .two-column {
        background: url('../images/smoothie-two-column-border_heightLarge.png') no-repeat;
        background-size: 100%;
    }
    .modal-body .two-column,
    .modal-body .three-column {
        width: 100%;
    }
    #smoothie-modal .modal-body .visible-smoothie-card.three-column .smoothie-card__content .content p.bottom-text{
        width: 90%;
        bottom: 2%;
    }
    #smoothie-modal .visible-smoothie-card .smoothie-heading {
        height: 7vw;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .content {
        height: 59vw;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .smoothie-card__footer {
        padding: 0;
        margin-top: 0 !important;
    }
    .bottom-carousel .right-grid .slick-initialized{
        padding: 0;
    }
    .smoothie-glossary-outer .cards-holder li .smoothie-card-wrapper {
        height: 241px;
    }
    .smoothie-glossary-outer .cards-holder li:nth-child(2),
    .smoothie-glossary-outer .cards-holder li:nth-child(3) {
        margin-top: -44%;
    }
    .cards-holder .smoothie-card-wrapper .content,
    .bottom-carousel .two-column.smoothie-card-wrapper .content {
        height: 177px;
    }
    .middle-cards .smoothie-card__footer {
        padding: 0;
        margin-top: 4.5% !important;
    }
    .cards-holder .three-column .smoothie-card__content .content p.bottom-text {
        width: 90%;
        bottom: 1%;
    }
    .smoothie-glossary-outer .tl-container {
        height: 143vw;
    }
    .reveal button.close-button {
        top: 0%;
    }
    .bottom-carousel .three-column.smoothie-card-wrapper .content {
        height: 57vw;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__footer,
    .bottom-carousel .right-grid .two-colum .smoothie-card__footer {
        padding: 0 20px 8px 20px;
        margin-top: 0px !important;
    }
} */
@media (max-width: 500px){
    
    .two-column,
    .three-column {
        width: 85%;
    }
    .three-column {
        background: url('../images/smoothie-three-column-border_heightLarge.png') no-repeat;
        background-size: 100%;
    }
    .two-column {
        background: url('../images/smoothie-two-column-border_heightLarge.png') no-repeat;
        background-size: 100%;
    }
    .modal-body .two-column,
    .modal-body .three-column {
        width: 100%;
    }
    #smoothie-modal .modal-body .visible-smoothie-card.three-column .smoothie-card__content .content p.bottom-text{
        width: 90%;
        bottom: 4%;
    }
    #smoothie-modal .visible-smoothie-card .smoothie-heading {
        height: 7vw;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .content {
        height: 54vw;
/*         border: 2px solid #F00; */
    }
    .bottom-carousel .right-grid .slick-initialized{
        padding: 0;
    }
    .smoothie-glossary-outer .cards-holder li .smoothie-card-wrapper {
        height: 241px;
    }
    .smoothie-glossary-outer .cards-holder li:nth-child(2),
    .smoothie-glossary-outer .cards-holder li:nth-child(3) {
        margin-top: -44%;
    }
    .cards-holder .smoothie-card-wrapper .content,
    .bottom-carousel .two-column.smoothie-card-wrapper .content {
        height: 43vw;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .smoothie-card__footer,
    .middle-cards .smoothie-card__footer {
        padding: 0;
        margin-top: 2.5% !important;
    }
    #smoothie-modal .modal-body .visible-smoothie-card .smoothie-card__footer{
        margin-top: 0.5% !important;
    }
    .cards-holder .three-column .smoothie-card__content .content p.bottom-text,
    .cards-holder .two-colum .smoothie-card__content .content p.bottom-text {
        width: 90%;
        bottom: 1%;
    }
    .smoothie-glossary-outer .tl-container {
        height: 143vw;
    }
    .reveal button.close-button {
        top: 0%;
    }
    .bottom-carousel .three-column.smoothie-card-wrapper .content,
    .bottom-carousel .two-colum.smoothie-card-wrapper .content {
        height: 52vw;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__footer,
    .bottom-carousel .right-grid .two-colum .smoothie-card__footer,
    .bottom-carousel .smoothie-card-wrapper.three-column .smoothie-card__footer{
        padding: 0;
        margin-top: 1% !important;
    }
    .bottom-carousel .smoothie-card-wrapper.two-column .smoothie-card__footer{
        padding: 0;
        margin-top: 11.5% !important;
    }
    .bottom-carousel .right-grid .three-column .smoothie-card__footer.smoothie-card__disclaimer,
    .bottom-carousel .right-grid .two-colum .smoothie-card__footer.smoothie-card__disclaimer{
        margin-top: 3% !important;
    }
    .slick-slider .slick-list .three-column,
    .slick-slider .slick-list .two-column {
        height: 105vw;
    }
}