/* -- Action Panel Styles -- */

.content .action_panels {
    display: block;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    max-width: 1240px;
    margin: 0 auto 20px;
}
.content .action_panels .action_row,
.content .action_panels .action_col,
.content .action_panels .title,
.content .action_panels .panels,
.content .action_panels .panels .panel,
.content .action_panels .panels .panel .wrap,
.content .action_panels .panels .panel .block,
.content .action_panels .panels .panel .text {
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}
.content .action_panels .action_row,
.content .action_panels .action_col,
.content .action_panels .title,
.content .action_panels .panels {

}
.content .action_panels .action_row:after,
.content .action_panels .action_col:after,
.content .action_panels .title:after,
.content .action_panels .panels:after{
    content: "";
    display: block;
    float: none;
    clear: both;
    height: 0;
}
.content .action_panels .action_row {
    clear: both;
    margin: 0 auto 10px;
}
.content .action_panels .action_row:last-child {
    margin-bottom: 0;
}
.content .action_panels .action_col {
    float: left;
    width: 100%;
    min-height: 1px;
}
.content .action_panels .title {
    font-size: 140%;
    line-height: 1.4;
    margin: 0 auto 10px;    
    text-align: inherit;
}
.content .action_panels .panels {
    clear: both;
}
.content .action_panels .panels .panel {
    float: left;
    width: 100%;
    max-width: 310px;
    height: auto;
    background-image: none;
    padding-bottom: 10px;
}
.content .action_panels .panels .panel .wrap {
    display: block;
    margin: 0 10px 0 0;
    overflow: hidden;
}
.content .action_panels .panels .panel .image {
    position: relative;
    z-index: 1;
    display: block;
    background-image: none;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: auto;
    height: 0;
    padding: 0;
    padding-bottom: 50%;
    direction: ltr;
    text-indent: -9999px;
    border: 1px solid #000000;
    border-color: rgba(0, 0, 0, 0.3);
    transition: background-size 0.6s;
}
.content .action_panels .panels:not(.notext) .panel .image {
    border-bottom: 0 none transparent;
}
.content .action_panels .panels .panel:hover .image {
    background-size: 110%;
}
.content .action_panels .panels .panel .text {
    position: relative;
    z-index: 2;
    font-size: 90%;
    line-height: 1.4;
    padding: 6px 9px;
    background-color: #000000;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
    border: 1px solid #000000;
    border-color: rgba(0, 0, 0, 0.3);
}
.content .action_panels .panels:not(.notext) .panel .text {
    border-top: 0 none transparent;
}

.content .action_panels .action_col.w20 { width: 20%; }
.content .action_panels .action_col.w25 { width: 25%; }
.content .action_panels .action_col.w75d2 { width: 37.5%; }
.content .action_panels .action_col.w50 { width: 50%; }
.content .action_panels .action_col.w70 { width: 75%; }
.content .action_panels .action_col.w33 { width: 33.33%; width: calc((100% / 3) * 1); }
.content .action_panels .action_col.w66 { width: 66.66%; width: calc((100% / 3) * 2); }
.content .action_panels .action_col.w100 { width: 100%; }

.content .action_panels .panels .panel.w20 { width: 20%; }
.content .action_panels .panels .panel.w25 { width: 25%; }
.content .action_panels .panels .panel.w75d2 { width: 37.5%; }
.content .action_panels .panels .panel.w50 { width: 50%; }
.content .action_panels .panels .panel.w70 { width: 75%; }
.content .action_panels .panels .panel.w33 { width: 33.33%; width: calc((100% / 3) * 1); }
.content .action_panels .panels .panel.w66 { width: 66.66%; width: calc((100% / 3) * 2); }
.content .action_panels .panels .panel.w100 { width: 100%; }

.content .action_panels .panels .panel.bookenda .wrap { background-color: #2a76e2; }
.content .action_panels .panels .panel.bookenda .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/bookenda.png); }

.content .action_panels .panels .panel.dispatch-ninja .wrap { background-color: #2684c1; }
.content .action_panels .panels .panel.dispatch-ninja .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/dispatch-ninja.png); }

.content .action_panels .panels .panel.doordash .wrap { background-color: #ff3008; }
.content .action_panels .panels .panel.doordash .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/doordash.png); }

.content .action_panels .panels .panel.foodora .wrap { background-color: #d60665; }
.content .action_panels .panels .panel.foodora .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/foodora.png); }

.content .action_panels .panels .panel.just-eat .wrap { background-color: #d52623; }
.content .action_panels .panels .panel.just-eat .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/just-eat.png); }

.content .action_panels .panels .panel.skip-dishes .wrap { background-color: #be2c2c; }
.content .action_panels .panels .panel.skip-dishes .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/skip-dishes.png); }

.content .action_panels .panels .panel.uber-eats .wrap { background-color: #3ea50e; }
.content .action_panels .panels .panel.uber-eats .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/uber-eats.png); }

.content .action_panels .panels .panel.yp-dine .wrap { background-color: #ffcd00; }
.content .action_panels .panels .panel.yp-dine .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/yp-dine.png); }

.content .action_panels .panels .panel.tb-dine .wrap { background-color: #06556e; }
.content .action_panels .panels .panel.tb-dine .image { background-image: url(TEMPLATE_WEBSITE_URL/images/action-panels/tb-dine.png); }

.content .action_panels .panels .panel.platterz .wrap { background-color: #f27355; }
.content .action_panels .panels .panel.platterz .image { background-image: url(/images/action-panel_platterz.png); }

.content .action_panels .panels .panel.freshbuy .wrap { background-color: #2fab2b; }
.content .action_panels .panels .panel.freshbuy .image { background-image: url(/images/action-panel_freshbuy.png); }

.content .action_panels .panels .panel.nextdoor .wrap { background-color: #ffc826; }
.content .action_panels .panels .panel.nextdoor .image { background-image: url(/images/action-panel_nextdoor.png); }

.content .action_panels .panels .panel.hidden { display: none; }


@media (max-width: 980px){
    
    .content .action_panels .panels .panel { max-width: none; }

    .content .action_panels .action_col.w33 { width: 66.66%; width: calc((100% / 3) * 2); }    
    .content .action_panels .panels .panel.w33 { width: 66.66%; width: calc((100% / 3) * 2); }

    .content .action_panels .action_col.w66 { width: 100%; }    
    .content .action_panels .panels .panel.w66 { width: 100%; }

    .content .action_panels .action_col.w20 { width: 33.33%; width: calc((100% / 3) * 1); }    
    .content .action_panels .panels .panel.w20 { width: 33.33%; width: calc((100% / 3) * 1); }

    .content .action_panels .action_col.w25 { width: 50%; }    
    .content .action_panels .panels .panel.w25 { width: 50%; }

    .content .action_panels .action_col.w50 { width: 100%; }    
    .content .action_panels .panels .panel.w50 { width: 100%; }
    
    .content .action_panels .action_col.spacer { display: none; }

    .content_editor .action_panels .action_col.w33 { width: 50%; }    
    .content_editor .action_panels .panels .panel.w33 { width: 50%; }
    
}