/*============================================================================*/
/*================= GLOBAL STYLES FOR CORPORATE UI FRAMEWORK =================*/
/*============================================================================*/

/*
    This stylesheet is for framework-level (aka global, shared) CSS rules. If there is ever more than one Corporate site, 
    this stylesheet (and 'corporate-framework-mobile.css') should be shared among all of them, 
    while 'corporate-content.css' and 'corporate-content-mobile.css' should be unique (local) per site.
*/

/*------ reset (not needed because of Bootstrap) ------*/

/*------ clearfix ------*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.content-two-column {
    column-count:2;
}

/*------ typography ------*/
p, span, h1, h2, h3, h4, h5, a {
    font-family: "Trebuchet MS", Arial, sans-serif;
    line-height: 22px;
    font-size:16px;
    color: #132736;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

/*defaults - most common styles, but corporate design is not consistent so these will need to be overridden in some cases*/
h1, h2 {
    color: #541763;
    font-size: 30px;
    font-weight: bold;
}



h4 {
    font-size: 25px;
    color: #541763;
    font-weight: bold;
}
li{
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 16px;
    color: #132736;
    line-height: 22px;
}
a:hover {
    text-decoration: none;
}

/*---reusable rules (shared among multiple components---*/
.rounded-bl {
    border-radius: 0 0 0 24px;
}

.rounded-br {
    border-radius: 0 0 24px 0;
}

a.button {
    color: #fff;
    background: #541763;
    border-radius: 0 0 20px 0;
    padding: 14px 30px;
    font-size: 16px;
}

.float-right {
    float:right;
}

.float-left{
    float:left;
}

.whiteBodyCopy {
    color:#fff;
}

.whiteBodyCopy a {
    color:#fff;
    font-weight:bold;
}


/*------ Matchbox additions ------*/
/* 
    Hide matchbox instances until JS calculations are finished, improves page load UX
*/
.matchBox {
    opacity: 0;
}

    .no-js .matchBox,
    .matchBox.initialized,
    .matchBox.scriptError {
        opacity: 1;
    }

/*------ Bootstrap Overrides ------*/
/*
    This is to gain more control over Epi Bootstrap.
    Setting a block to "Full width" in the CMS gives the .displaymode-full class, which we will use to mean "stop acting like a bootstrap column."
    (If for some reason you actually want it to act like a full-width column, just leave it set to "auto" in the CMS.)
    See Corporate framework documentation for details.
*/
.displaymode-full.col-lg-12, .displaymode-full.col-md-12, .displaymode-full.col-sm-12, .displaymode-full.col-xs-12 {
    padding: 0;
    float: none;
    position: static;
}

/*default font location does not resolve - update here instead of directly in bootstrap.css (which would be bad practice!) */
@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

/*
    This class was created to match the behavior of some direct bootstrap overrides that were done on the live site. 
    Use this like you would use "container". Refer to live site's About Us section.
*/
.remove-bottom-margin {
    margin-bottom:0px !important;
}

.container-custom {
    width: 100%;
    margin:0 auto;
    max-width: 1170px;
    padding: 0;
    overflow-x: hidden;
    margin-bottom:10px;
}
.container-custom:before,
.container-custom:after {
    content: " ";
    display: table;
}
.container-custom:after {
    clear: both;
}

.dark-gray-block {
    background-color:#b3b6b5;
    padding:20px;
}

    .dark-gray-block p {
        color:#fff;
    }

    .dark-gray-block a {
        color:#fff;
        font-weight:bold;
    }

.press-release-container {
    max-width:1170px;

}

.press-release-container h3 {
    font-size: 22px;
    font-weight: bold;
}


/*======================================= BEGIN CORPORATE FRAMEWORK BLOCKS =======================================*/

/*-------- BLOCK: NAVIGATION --------*/
/*
    built in to CorporatePage.cshtml
*/
header {
    background-color: #410040;
}

.site-navigation {
    display: table;
    /*width: 100%; */
    table-layout: fixed;
    max-width: 1077px;
    margin: 0 auto;
}

.float-right {
    float:right;
}

.padding-right-20 {
    padding-right:20px;
}

    .site-navigation .nav-item {
        display: table-cell;
        text-align: center;
    }

        .site-navigation .nav-item a {
            font-family: Trebuchet MS Bold, Arial, sans-serif;
            color: #fff !important;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: bold;
            text-decoration: none !important;
            padding-top: 30px;
            padding-bottom: 30px;
            display: block;
        }

        .site-navigation .nav-item.active {
            background: #5ac9e4;
        }

.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
    border-bottom:none !important;
}

header {
    width: 100%;
    background-color: #410040;
    height: 80px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 24px;
}

/*-------- BLOCK: CAROUSEL --------*/
.standard-carousel {
    max-width: 1077px;
    margin: 0 auto 60px;
}

    .standard-carousel .carousel-control {
        width: 50px;
    }

        .standard-carousel .carousel-control .glyphicon {
            /*position:absolute;*/
            top: 50%;
            /*margin-left:-10px;*/
        }

            .standard-carousel .carousel-control .glyphicon img {
                margin-top: -30px;
            }

    .standard-carousel .left.carousel-control {
        left: -50px;
        background-image: none !important;
        opacity: 1 !important;
    }

    .standard-carousel .right.carousel-control {
        right: -50px;
        background-image: none !important;
        opacity: 1 !important;
    }

    .standard-carousel .carousel-indicators,
    .standard-carousel .carousel-caption {
        display: none;
    }

    .standard-carousel img.mobileOnly {
        margin: 0 auto;
    }

/*-------- BLOCK: CARDS GRID --------*/
.cards-grid {
    max-width: 1077px;
    margin: 0 auto;
}

    .cards-grid p {
        color: #fff;
    }

    .cards-grid .content.lg {
        background: #5ac9e4;
        color: #fff;
        height: 100%;
        padding: 30px 28px 60px 28px;
        position: relative;
    }

        .cards-grid .content.lg h2 {
            color: #541763;
            font-size: 30px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 20px;
        }

        .cards-grid .content.lg p {
            font-size: 16px;
        }

    .cards-grid .content .bottom-link a {
        position: absolute;
        bottom: 32px;
        display: block;
        color: #fff;
        font-size: 16px;
    }

    .cards-grid .content.sm {
        background: #541763;
        color: #fff;
        height: 100%;
        padding: 30px 28px 64px 28px;
        position: relative;
    }

        .cards-grid .content.sm h2 {
            font-weight: bold;
            font-size: 18px;
            margin-top: 0;
            color: #fff;
        }

        .cards-grid .content.sm p {
            font-size: 16px;
        }

    .cards-grid a:after {
        content: "\e258";
        position: relative;
        top: 3px;
        left: 3px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }

    .cards-grid .img-wrapper {
        width: 100%;
        height: 100%;
        min-height: 546px;
        /*'force aspect ratio' trick
        position: relative;
        padding-bottom: 126%;*/
    }

        .cards-grid .img-wrapper > .image {
            height: 100%;
            margin-left: 10px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            /*'force aspect ratio' trick
            position: absolute;
            top: 0;
            bottom: 0;
            left: 10px;
            right: 0;*/
        }

/*-------- BLOCK: CARDS ROW --------*/
.cards-row {
    margin: 0 auto 40px;
    max-width: 1170px;
}

    .cards-row .mobile-image {
        display: none;
    }

    .cards-row .inner, .cards-row .content {
        height: 100%;
    }

    .cards-row .content {
        background: #5AC9E4;
        padding: 30px 30px 60px 30px;
        position: relative;
    }

        .cards-row .content h2 {
            margin-top: 0;
            margin-bottom: 24px;
            color: #541763;
            font-size: 30px;
            font-weight: bold;
        }

        .cards-row .content p {
            color: #fff;
            font-size: 16px;
            line-height: 1.375;
        }

        .cards-row .content img {
            max-width: 100%;
            height: auto;
        }

        .cards-row .content .bottom-link a {
            position: absolute;
            bottom: 30px;
            left: 30px;
            color: #fff;
            font-size: 16px;
        }

    .cards-row .rounded-br .content {
        border-radius: 0 0 24px 0;
    }

    .cards-row .rounded-bl .content {
        border-radius: 0 0 0 24px;
    }

    .cards-row .noLink .bottom-link {
        display: none;
    }

    .cards-row .content .bottom-link a:after {
        content: "\e258";
        position: relative;
        top: 3px;
        left: 3px;
        display: inline-block;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
    }


    .cards-row .hasBkdImg .content {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /*display link as button (checkbox in CMS)*/
    .cards-row .linkIsButton .content {
        padding-bottom: 120px;
    }

    .cards-row .linkIsButton .bottom-link a {
        background: #541763;
        border-radius: 0 0 20px 0;
        padding: 14px 30px;
        font-size: 16px;
        bottom: 46px;
    }

    /*optional 'purple' class can be added through CMS*/
    .cards-row .purple .content {
        background: #541763;
    }

        .cards-row .purple .content h2 {
            color: #5ac9e4;
        }

    .cards-row .purple.linkIsButton .bottom-link a {
        background: #5AC9E4;
    }

    /*optional 'grey' class can be added through CMS*/
    .cards-row .grey .content {
        background: #b3b6b5;
    }


/*-------- BLOCK: PRODUCT TABS --------*/
.product-tabs {
    max-width: 1190px;
    margin: 0 auto 60px;
    padding: 0 10px;
}

    .product-tabs .tabs {
        margin-top: 10px;
        margin-bottom: 90px;
    }

        /*default is three tabs*/
        .product-tabs .tabs .tab {
            width: 33.33333%;
            float: left;
            cursor: pointer;
            position: relative;
            min-height: 255px;
        }

    /*in case of four tabs*/
    .product-tabs.count4 .tabs .tab {
        width: 25%;
    }
    /*in case of two tabs*/
    .product-tabs.count2 .tabs .tab {
        width: 50%;
    }
    /*in case of one tab*/
    .product-tabs.count1 .tabs .tab {
        width: 100%;
    }

    .product-tabs .tabs .tab .image {
        height: 175px;
        text-align: center;
    }

        .product-tabs .tabs .tab .image img {
            max-width: 100%;
            height: auto;
        }

    .product-tabs .tabs .tab h3 {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 1.25;
        max-width: 310px;
        margin: 18px auto 0;
    }

    .product-tabs .tabs .tab p {
        font-size: 16px;
        text-align: center;
        margin: 0 auto;
    }

    .product-tabs .tabs .tab:after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        bottom: -50px;
        margin-left: -18px;
        height: 36px;
        width: 36px;
        border: 1px solid #ebebec;
        border-radius: 25px;
        background: #ebebec;
    }

    .product-tabs .tabs .tab.active:after {
        content: "";
        display: block;
        background: #541763;
        border: 2px solid #ebebec;
        height: 37px;
        width: 37px;
    }

    .product-tabs .panes {
    }

        .product-tabs .panes .pane {
            display: none;
        }

            .product-tabs .panes .pane.active {
                display: block;
                border: 2px solid #a2e0ef;
                position: relative;
                width: 100%;
            }

                .product-tabs .panes .pane.active:before {
                    content: "";
                    position: absolute;
                    display: block;
                    height: 27px;
                    width: 50px;
                    top: -26px;
                    margin-left: -25px;
                    background: url(/siteassets/top-carrot.png);
                }

        /*default is three tabs*/
        .product-tabs .panes .pane0.active:before {
            left: 16.5%;
        }

        .product-tabs .panes .pane1.active:before {
            left: 50%;
        }

        .product-tabs .panes .pane2.active:before {
            left: 83.5%;
        }

    /*in case of one tab*/
    .product-tabs.count1 .panes .pane0.active:before {
        left: 50%;
    }
    /*in case of two tabs*/
    .product-tabs.count2 .panes .pane0.active:before {
        left: 25%;
    }

    .product-tabs.count2 .panes .pane1.active:before {
        left: 75%;
    }

    .product-tabs .panes .pane .mobile {
        display: none;
    }
    /*in case of four tabs*/
    .product-tabs.count4 .panes .pane0.active:before {
        left: 12.3%;
    }

    .product-tabs.count4 .panes .pane1.active:before {
        left: 37.5%;
    }

    .product-tabs.count4 .panes .pane2.active:before {
        left: 62.5%;
    }

    .product-tabs.count4 .panes .pane3.active:before {
        left: 87.7%;
    }
    /*--*/

    .product-tabs .panes .pane .top {
        padding: 40px 20px 10px;
    }

        .product-tabs .panes .pane .top img {
            max-width: 100%;
            height: auto;
            margin: 0 auto;
            display: block;
        }

    .product-tabs .panes .pane .bottom {
        background: #a2e0ef;
        padding: 23px 60px;
    }

        .product-tabs .panes .pane .bottom p {
            color: #fff;
            font-size: 16px;
            max-width: none;
        }

        .product-tabs .panes .pane .bottom .cta {
            text-align: center;
            padding: 40px 0 30px;
        }

.cta a:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-weight: normal;
    font-size: 14px;
    padding-left: 7px;
    vertical-align: bottom;
}

.carrot-after-link a:after {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-weight: normal;
    font-size: 14px;
    padding-left: 7px;
    vertical-align: bottom;
}

.purple-btn {
    background-color: #541763;
    display: inline-block;
    padding: 14px 25px 14px 20px;
}

/*-------- BLOCK: HISTORY CAROUSEL --------*/
.history-carousel {
    margin-bottom: 40px;
}

    .history-carousel .carousel-indicators-numbers li {
        font-size: 15px;
        text-indent: 0;
        margin: 0 2px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 100%;
        line-height: 50px;
        color: #000;
        /*transition: all 0.25s ease;*/
    }

        .history-carousel .carousel-indicators-numbers li p {
            color: #000;
            font-size: 15px;
            line-height: 50px;
        }

        .history-carousel .carousel-indicators-numbers li.active, .carousel-indicators-numbers li:hover {
            background-color: #541763;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
        }

            .history-carousel .carousel-indicators-numbers li.active p, .carousel-indicators-numbers li:hover p {
                font-size: 16px;
                font-weight: bold;
                color: #fff;
            }

        .history-carousel .carousel-indicators-numbers li:nth-child(odd).active, .carousel-indicators-numbers li:nth-child(odd):hover {
            background: #5ac9e4;
        }

    .history-carousel .item {
        min-height: 500px;
        background-color: #e9e9e9;
        border: 20px solid #ccc;
    }

    .history-carousel .image {
        position: absolute;
        z-index: 0;
        top: 57px;
        right: 12%;
    }

        .history-carousel .image img {
            max-width: 100%;
            height: auto;
        }

    .history-carousel .content-box {
        position: relative;
        z-index: 1;
        max-width: 400px;
        margin-left: 10px;
    }

        .history-carousel .content-box .title {
            margin-top: 16px;
        }

            .history-carousel .content-box .title, .history-carousel .content-box .title p {
                font-size: 60px;
                color: #5ac9e4;
                font-weight: bold;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
                margin-bottom: 5px;
            }

    .history-carousel .item:nth-child(odd) .content-box .title, .history-carousel .item:nth-child(odd) .content-box .title p {
        color: #541763;
    }

    .history-carousel .content {
        background: #541763;
        padding: 20px 20px 50px;
    }

        .history-carousel .content, .history-carousel .content p {
            color: #fff;
            font-size: 16px;
            line-height: 1.25;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
        }

    .history-carousel .item:nth-child(even) .content {
        position: relative;
        background: #5ac9e4;
    }

    .history-carousel .content .controls .prev {
        display: block;
        position: absolute;
        bottom: 0px;
        left: 16px;
        color: #fff;
        font-size: 16px;
        width: 40%;
        padding: 10px 0;
        text-align: left;
        text-shadow: none;
    }

    .history-carousel .content .controls .next {
        display: block;
        position: absolute;
        bottom: 0px;
        right: 16px;
        color: #fff;
        font-size: 16px;
        width: 40%;
        padding: 10px 0;
        text-align: right;
        text-shadow: none;
    }

    .history-carousel .item:first-of-type .content .controls .prev,
    .history-carousel .item:last-of-type .content .controls .next {
        display: none;
    }

    .history-carousel .content .controls .glyphicon-menu-left:before,
    .history-carousel .content .controls .glyphicon-menu-right:before {
        color: #fff;
    }

    .history-carousel .content .controls .prev:hover, .history-carousel .content .controls .next:hover,
    .history-carousel .content .controls .prev:hover .glyphicon-menu-left:before, .history-carousel .content .controls .next:hover .glyphicon-menu-right:before {
        text-decoration: none;
        color: #ccc;
    }

/*  Commenting this out because it's bad UX, even if it's how the original site works. We shoudn't swap the positions of prev/next, it's counter-intuitive.
    .history-carousel .item:first-of-type .content .controls .next {
        right:initial;
        left:20px;
        text-align:left;
    }*/

/*-------- BLOCK: HERO BANNER --------*/
.hero-banner {
    background: #5ac9e4;
}

    .hero-banner > .inner {
        max-width: 1170px; /*This value is never the same twice on the current live site. This will be our default. Actual widths will likely need to be done as per-instance overrides. */
        margin: 0 auto;
        min-height: 355px;
        position: relative;
        padding: 20px 0;
    }

    .hero-banner .caption {
        max-width: 390px;
    }

        .hero-banner .caption p {
            color: #fff;
            font-size: 15px;
            line-height: 1.4375;
        }

    .hero-banner h1,
    .hero-banner h1 p {
        /*because tinyMCE insists on adding p tags to everything*/
        color: #541763;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
        margin-top: 0;
    }

    .hero-banner .image {
        position: absolute;
        right: 0;
        top: 20px;
    }

        .hero-banner .image img {
            max-width: 100%;
            height: auto;
        }


/* QUICK FIXES AFTER QA */
.leadership-below-space  > div > p {
    height: 130px;
}

.global-site-footer .main .main-row h4 {
    font-size: 18px;
}

.bottom-block-top-margin {
    margin-top: 70px;
}

.bottom-block-top-bot-margin {
    margin-top: 70px;
    margin-bottom: 40px;
}

.job-search-padding {
    padding: 30px 0;
}

#HistoryTimelineMobile .panel:first-child .handle strong:after {
    content: "\2212";
}

#HistoryTimelineMobile .panel .handle strong:after {
    content: "\002b";
    font-size: 30px;
    position: relative;
    top: 3px;
    left: 3px;
}

#HistoryTimelineMobile .panel .handle[aria-expanded="true"] strong:after {
    content: "\2212";
}

#HistoryTimelineMobile .panel .handle[aria-expanded="false"] strong:after {
    content: "\002b";
}

@media (min-width: 768px) {

    .cards-row .content h2 {
        line-height: 30px;
    }

    li.nav-item.open {
        background: #e7e7e7;    
    }

    li.nav-item.open a {
        color: #555555 !important;
        border-bottom:  none !important;
    }

    li.nav-item.open ul.dropdown-menu {
        background: none;
        margin-top: 88px;
        left: -1px;
        min-width: 149px;
    }

    li.nav-item.open ul li a {
        background-color: #fff;
        color: #555555 !important;
        font-weight: normal;
        padding: 11px 0 11px 20px;
        text-transform: none;
    }

    li.nav-item.open ul li a:hover, li.nav-item.open ul li a:focus {
        background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
        background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
        background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
        background-color: #e8e8e8;
    }
}

div#ourApproachCardsRow2 {
    margin-top: -49px;
}

.corporatecontactformblock .control-group.row > div {

}

.corporatecontactformblock .control-group.row > div #submit-adverse {
    float: right;
}

.press-release-container > h2 {
    line-height: 40px;
}