﻿/* Handles the full width rows that have
 * classes assigned through bespoke.js */

/* Handles Home categories full width row */
.row-breakout.home-categories-row {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.row-breakout.home-categories-row {
    background: var(--theme-primary);
    padding: 75px 0;
}

.row-breakout.home-categories-row h2 {
    font-size: 48px;
    margin-bottom: 20px;
}

.row-breakout.home-categories-row .col-md-12 {
    width: 100%;
}

/* Handles category links blocks */
.row-breakout.home-categories-row .uc_link_block.col-md-3 ul {
    list-style: disc !important;
    padding-left: 20px;
}

.row-breakout.home-categories-row .uc_link_block h2 {
    font-size: 16px;
}

.row-breakout.home-categories-row .uc_link_block a {
    font-size: 13px;
    color: #000;
}

/* Handles all categories link block */
.row-breakout.home-categories-row .uc_link_block.col-md-12 {
    margin: 30px 0 0;
}

.row-breakout.home-categories-row .uc_link_block.col-md-12 li {
    text-align: center;
}

.row-breakout.home-categories-row .uc_link_block.col-md-12 a {
    background: #CDD2D9;
    padding: 0 20px;
    line-height: 36px;
    border-radius: 100px !important;
    display: inline-block;
}

@media (max-width: 767px) {
    .row-breakout.home-categories-row {
        justify-content: flex-start;
    }

    .row-breakout.home-categories-row h2 {
        font-size: 30px;
    }
}

@media (min-width: 571px) and (max-width: 767px) {
    .row-breakout.home-categories-row .uc_link_block.col-md-3 {
        width: 33.333%;
    }
}

@media (min-width: 768px) {   
    .row-breakout.home-categories-row .uc_link_block.col-md-3 {
        width: 12.5%;
    }
}

@media (max-width: 570px) {
    .row-breakout.home-categories-row .uc_link_block.col-md-3 {
        width: 50%;
    }
}

@media (min-width: 1600px) {
    .row-breakout.home-categories-row {
        padding: 75px 200px;
    }
}