/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/*
Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}


/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */

@media (max-width: 1400px) {
    .fc-col-outer-r,
    .cc-col-outer-r {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .fc-col-outer-l, .cc-col-outer-l {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }

    .cc-col-outer-r {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .cc-col-outer-l {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .fc-col-inner {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .fc-col-inner-large {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 1199px) {
    html {
        font-size: 14px;
    }

    .fc-col-outer {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .fc-col-outer-l {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
    }

    .fc-col-outer-r {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .cc-col-outer-r {
        -ms-flex: 0 0 30%;
        flex: 0 0 30%;
        max-width: 30%;
    }

    .cc-col-outer-l {
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        max-width: 70%;
    }

    .fc-col-inner {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .fc-col-inner-large {
        -ms-flex: 0 0 80%;
        flex: 0 0 80%;
        max-width: 80%;
    }

    .custom-checkbox .custom-control-label::before {
        top: 0.25rem;
    }
}

@media (max-width: 1024px) {

}

@media (max-width: 992px) {
    .fc-col-outer,
    .fc-col-outer-l,
    .fc-col-outer-r,
    .cc-col-outer,
    .cc-col-outer-l,
    .cc-col-outer-r,
    .fc-col-inner,
    .fc-col-inner-large {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .context-controls {
        margin-bottom: 2rem;
    }

    .content-tile-small.content-tile-medium .content-tile-body {
        padding: 40px 30px;
    }

    .content-tile-small.content-tile-long .content-tile-body {
        padding: 40px 60px;
    }
}