/*
 * jQuery FlexSlider v2.2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets
*********************************/
.flex-container a:active, .flexslider a:active
{
    outline: none;
}

/* TFS 2987210 -- `!important` is required here, not stylistic, and for exactly the same
   reason it is required on .rp-pause-control:focus in
   Assets/common/wcag/css/pause-control.css. Package B activates FlexSlider's .flex-pauseplay
   control fleet-wide, and that control is an <a> inside .flexslider, so this rule is what
   gives it a visible focus indicator. Specificity cannot win the cascade here, because a
   number of master stylesheets zero the outline with `!important` themselves -- an ordinary
   declaration loses to those no matter how specific it is. Twelve stylesheets under
   CMSVirtualFiles/CSSStylesheets/ do this; the two worst for reach are:

     RPcssMaster_S0053-The-Avenue-v3.css:5-8   `:focus, a:focus { outline: none !important; }`
                                               -- matches .flexslider a directly, and this
                                               template fronts 50+ live production domains.
     RPcssMaster_M0037-Conrex-Corporate.css:2866
                                               `*, input, select, textarea, option, button
                                               { outline: none!important; }` -- the universal
                                               selector, so it matches every element on the page.

   Greystar templates in the current WCAG scope are affected too (RPcssMaster_C0067-GS-Insta,
   RPcssMaster_C0051-GS-Balcony, RPcssMaster_S0069-GS-Grids). Without this the pause button is
   keyboard-reachable but shows no focus indication on those templates, which fails SC 2.4.7
   on the very control this ticket adds. Repo convention allows !important where the base
   stylesheet already uses it, which is precisely the case here.

   The `a:active { outline: none }` reset above is left alone -- that is the vendor's own
   intentional reset and is not competing with the focus indicator. */
.flex-container a:focus-visible, .flexslider a:focus-visible
{
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

.slides, .flex-control-nav, .flex-direction-nav
{
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Icon Fonts
*********************************/
/* Font-face Icons */
@font-face
{
    font-family: 'flexslider-icon';
    /* TFS 2987210 -- src: re-enabled. It had been commented out because RealPage replaced the
       vendor's arrow glyphs with the sprite_corporate_search.png background on
       .flex-direction-nav a, leaving no consumer of this font -- Camp A's
       .flex-direction-nav a:before declares neither font-family nor content. But
       .flex-pauseplay a:before (below) was never migrated off the icon font and still asks for
       content:'\f004'/'\f003'. That went unnoticed for years because `pausePlay` was false at
       every call site; this ticket turns it on, so the glyph would have rendered as tofu (and,
       with the font-size:0 that keeps the accessible-name text from showing, as a completely
       blank 44x44 button). Verified before re-enabling: all four font files are present in
       ./fonts/, the relative URLs resolve (200 on SAT), and the SVG font's glyph table does
       contain U+f003 (play) and U+f004 (pause). Blast radius is one selector -- `flexslider-icon`
       is referenced in this file at exactly two places, this @font-face and .flex-pauseplay
       a:before. Templates with their own copy (Avenue5, Legend) ship their own working
       @font-face; Camden/Essex override :before with content:url(...png), so neither is
       affected by this. */
    src: url('fonts/flexslider-icon.eot');
    src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider
{
    margin: 0;
    padding: 0;
    text-align: left;
}

    .flexslider .slides > li
    {
        display: none;
        -webkit-backface-visibility: hidden;
    }
    /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img
    {
        /*width: 100%;*/
        display: block;
    }

.flex-pauseplay span
{
    text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after
{
    content: "\0020";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .slides
{
    display: block;
}

* html .slides
{
    height: 1%;
}
    /* No JavaScript Fallback */
    /* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
    .no-js .slides > li:first-child
    {
        display: block;
    }
/* FlexSlider Default Theme
*********************************/
.flexslider
{
    background: #fff;
    position: relative;
    zoom: 1;
}

.flex-viewport
{
    max-height: 2000px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.loading .flex-viewport
{
    max-height: 300px;
}

.flexslider .slides
{
    zoom: 1;
}

.carousel li
{
    margin-right: 5px;
}
/* Direction Nav */
.flex-direction-nav
{
    *height: 0;
}

    .flex-direction-nav a
    {
        display: block;
        width: 24px;
        height: 24px;
        /* TFS 2987209 -- WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): min-width/min-height
           (not width/height) so this still wins on templates whose own
           RPcssMaster_<template>.css already overrides `width`/`height` to something
           larger (confirmed live: several templates render 40x90 from their own
           master stylesheet, not from this shared rule) -- min-* is a distinct
           property no other rule here also sets, so it applies fleet-wide without
           an !important fight. Live-confirmed (Ascension, Copper-Creek, 375/768/1440):
           40x90 -> 44x90, no overflow, no visual shift beyond the 4px width delta. */
        min-width: 44px;
        min-height: 44px;
        margin: -20px 0 0;
        position: absolute;
        top: 50%;
        z-index: 10;
        overflow: hidden;
        opacity: 0;
        cursor: pointer;
        font-size: 0px;
        text-indent: -9999999999;
        background: url(../Images/sprite_corporate_search.png) no-repeat left -343px;
    }

    .flex-direction-nav .flex-prev
    {
        left: 10px;
    }

    .flex-direction-nav .flex-next
    {
        right: 10px;
        text-align: right;
        background: url(../Images/sprite_corporate_search.png) no-repeat -23px -343px;
    }

.flexslider:hover .flex-prev
{
    opacity: 0.7;
    left: 10px;
}

.flexslider:hover .flex-next
{
    opacity: 0.7;
    right: 10px;
}

    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover
    {
        opacity: 1;
    }

    .flex-direction-nav .flex-prev:focus-visible, .flex-direction-nav .flex-next:focus-visible
    {
        opacity: 1;
    }

.flex-direction-nav .flex-disabled
{
    opacity: 0!important;
    filter: alpha(opacity=0);
    cursor: default;
    visibility: hidden;
}

.flex-direction-nav a:before
{
    font-size: 40px;
    display: inline-block;
}

.flex-direction-nav a.flex-next:before
{
}
/* Pause/Play */
.flex-pauseplay a
{
    /* TFS 2987210: was `display: block`. With the 44x44 min-* box below, a block box would
       leave the 20px glyph stranded in its top-left corner (the box is bottom-anchored, so
       it grows upward and the glyph rides up with the top edge). Flex centres the glyph in
       its own hit area instead. Safe to change: `pausePlay` has been false at every call
       site until this ticket, so this control has never rendered on any site -- there is no
       existing appearance to regress, only a new one to get right. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* TFS 2987210 -- WCAG 2.2.2 enables this pause/play control fleet-wide for the first
       time, so it must not ship failing a target-size rule the moment it appears. At the
       stock 20x20 it would fail SC 2.5.8 Target Size (Minimum, AA, 24x24) outright, and it
       would be the odd one out next to its two siblings in this same file -- .flex-direction-nav
       a and .flex-control-paging li a -- which TFS 2987209 raised to 44px in this release.
       Same technique as 2987209: min-width/min-height rather than width/height, so this still
       wins on templates whose own RPcssMaster_<template>.css overrides width/height, without
       needing !important. The glyph itself is untouched -- the :before icon stays 20px; the
       extra area is transparent and the flex rules above keep the icon centred within it. */
    min-width: 44px;
    min-height: 44px;
    /* Required companion to the min-* bump above, NOT cosmetic. FlexSlider writes the literal
       words "Pause"/"Play" into this anchor as real text (jquery.flexslider.js:437-439, from
       vars.pauseText/playText) -- that text is the control's accessible name, so it must stay
       in the DOM. At the old 20x20 it happened to be clipped by `overflow: hidden`; at 44x44
       the second line box falls inside the box and the word would become visible next to the
       icon. `font-size: 0` collapses it visually while leaving it intact for assistive tech.
       This is the same treatment the sibling .flex-direction-nav a already uses (line ~156)
       for its own "Previous"/"Next" text, and it does not affect the glyph, because
       .flex-pauseplay a:before re-declares its own font-size: 20px below -- exactly as
       .flex-direction-nav a:before re-declares 40px. */
    font-size: 0;
    position: absolute;
    bottom: 5px;
    left: 10px;
    /* TFS 2987210 -- WCAG 1.4.11 Non-text Contrast. This control sits in the bottom-left
       corner of hero/gallery photography, so its glyph has to stay legible against an
       arbitrary, editor-supplied image. The stock treatment (color:#000 at opacity:0.8, no
       backdrop) is a black glyph floating on an unknown photo -- indeterminate contrast, and
       invisible on any dark image. Reusing the pattern this repo already established for
       exactly this problem: #hero-scroll (hero.css:416-432, TFS 2905633), which pairs
       white-on-rgba(0,0,0,0.7) precisely because it "does not depend on the
       (property-configurable) hero overlay". Worst case here is the chip over pure white:
       rgba(0,0,0,0.7) composites to ~#4C4C4C, and #fff on that is ~8.2:1 -- comfortably past
       the 3:1 that 1.4.11 asks of a UI component, and past 4.5:1 too. opacity is raised from
       0.8 to 1 deliberately: at 0.8 the backdrop dilutes to ~3.4:1, which passes 1.4.11 only
       barely and for no benefit. The :hover rule below (opacity:1) becomes a no-op and is
       left in place rather than churn the diff. */
    opacity: 1;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
}

    .flex-pauseplay a:before
    {
        font-family: "flexslider-icon";
        font-size: 20px;
        display: inline-block;
        content: '\f004';
    }

    .flex-pauseplay a:hover
    {
        opacity: 1;
    }

    .flex-pauseplay a.flex-play:before
    {
        content: '\f003';
    }
/* Control Nav */
.flex-control-nav
{
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: center;
}

    .flex-control-nav li
    {
        margin: 0 6px;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }

.flex-control-paging li a
{
    /* TFS 2987209 -- WCAG 2.2 AAA 2.5.5 Target Size (Enhanced): replaces the AA-era
       (2924977) "grow to 24x24, background-clip:content-box keeps the visible dot
       small" technique below, which was live-confirmed BROKEN since it shipped --
       the very next `background:` shorthand declaration in this same rule resets
       `background-clip` back to its initial `border-box` (the CSS background
       shorthand always resets every longhand it doesn't re-specify, including
       background-clip). So the "24x24 hit area / ~11px visible dot" comment was
       never true live: the dot has always painted the FULL 24x24 box, not a small
       circle. Confirmed live via computed-style (Ascension, Copper-Creek): bgClip
       reads "border-box", painted size == border size, on every dot.
       Old (broken, kept only for history -- do not resurrect):
         box-sizing: border-box; width: 24px; height: 24px; padding: 6px;
         background-clip: content-box; background: #666; background: rgba(0,0,0,0.5);
       Fix: stop painting the anchor itself (so no `background` shorthand ever runs
       on it, which is what made the old rule fragile) and paint the actual dot on
       a ::after pseudo-element instead. The anchor becomes a transparent 44x44 hit
       area; ::after paints a 12x12 dot, matching the AA-era file's original small
       visual size. This is a visual bugfix (dots stop rendering as solid 24x24
       blocks) as well as the AAA hit-area fix. Reachability caveat: on the live
       domains checked (Ascension, Copper-Creek homepages) this dot pager's markup
       exists in the DOM but its container renders at 0x0 (JS/carousel-state
       dependent, not something CSS controls) -- could not produce a live
       before/after screenshot of a VISIBLE dot row on those domains. Shipping this
       defensively since it is definitely reachable on some template/state we did
       not happen to catch, and the fix is a pure improvement over the broken
       status quo either way. */
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    display: block;
    position: relative;
    background: none;
    cursor: pointer;
    text-indent: -9999px;
    border-radius: 0;
    box-shadow: none;
}

    .flex-control-paging li a::after
    {
        content: "";
        position: absolute;
        top: 16px;
        left: 16px;
        width: 12px;
        height: 12px;
        background: rgba(0, 0, 0, 0.5);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -o-border-radius: 20px;
        border-radius: 20px;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
        -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    }

    .flex-control-paging li a:hover::after
    {
        background: rgba(0, 0, 0, 0.7);
    }

    .flex-control-paging li a.flex-active::after
    {
        background: rgba(0, 0, 0, 0.9);
    }

    .flex-control-paging li a.flex-active
    {
        cursor: default;
    }

.flex-control-thumbs
{
    margin: 5px 0 0;
    position: static;
    overflow: hidden;
}

    .flex-control-thumbs li
    {
        width: 25%;
        float: left;
        margin: 0;
    }

    .flex-control-thumbs img
    {
        width: 100%;
        display: block;
        opacity: .7;
        cursor: pointer;
    }

        .flex-control-thumbs img:hover
        {
            opacity: 1;
        }

    .flex-control-thumbs .flex-active
    {
        opacity: 1;
        cursor: default;
    }

@media screen and (max-width: 860px)
{
    .flex-direction-nav .flex-prev
    {
        opacity: 1;
        left: 10px;
    }

    .flex-direction-nav .flex-next
    {
        opacity: 1;
        right: 10px;
    }
}