/* Triangle hover */

.capabilities li.tab-title.active > a:after { position: absolute; top: 60px; left: 50%; content: ""; display: block; border-top: 30px solid #fff; border-left: 17px solid transparent; border-right: 17px solid transparent; margin-left: -17px; }
.capabilities li.tab-title.everything.active > a:after { border-top: 30px solid #0099AA; }
.capabilities li.tab-title.everywhere.active > a:after { border-top: 30px solid #991155; }
/*hover state*/
.capabilities li.tab-title:hover > a:after { position: absolute; top: 60px; left: 50%; content: ""; display: block; border-top: 30px solid #fff; border-left: 17px solid transparent; border-right: 17px solid transparent; margin-left: -17px; }

/*--*/

.capabilities { overflow-x: hidden; }

.clear { clear: both; }

.capabilities .fullWidth { background: url(../imgs/tabs/tab-bkg.jpg) repeat-x #fff top left; }

.capabilities .tabs { height: 80px; position: relative; }

    .capabilities .tabs li { width: 50%; text-align: center; }

    .capabilities .tabs .tab-title a,
    .capabilities .tabs .tab-title.active a { height: 80px; font-family: FFDINWebPro, Tahoma, Verdana, Segoe, sans-serif; color: #777; font-size: 1rem; line-height: 1.25rem; padding: 22px 0 0; }

        .capabilities .tabs .tab-title a span { display: block; }

    .capabilities .tabs .tab-title.everything.active a { background-color: #0099AA; color: #fff; }

    .capabilities .tabs .tab-title.everything.active::before,
    .capabilities .tabs .tab-title.everywhere.active::before { content: ''; width: 100vw; height: 80px; display: block; position: absolute; top: 0; }

    .capabilities .tabs .tab-title.everything.active::before { background-color: #0099AA; margin-left: -50vw; z-index: -1; }

    .capabilities .tabs .tab-title.everywhere.active a { background-color: #991155; color: #fff; }

    .capabilities .tabs .tab-title.everywhere.active::before { background-color: #991155; margin-left: 100%; z-index: -1; }

    .capabilities .tabs li.tab-title.everything + li.cap-divider { width: 30px; height: 80px; position: absolute; left: 50%; top: 0; margin-left: -15px; z-index: 10; text-indent: -5000px; overflow: hidden; background-color: #991155; border-left: 0px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid #fff; }

    .capabilities .tabs li.tab-title.everything.active + li.cap-divider { background-color: #fff; border-left: 0px solid transparent; border-right: 30px solid transparent; border-bottom: 80px solid #0099AA; }

    .capabilities .tabs dd > a:hover, .tabs .tab-title > a:hover { background-color: #fff; }

    .capabilities .tabs .tab-title a { background-color: #fff; }

.capabilities .tabs-content { padding: 0; margin-bottom: 0; }

.capabilities .columns { /*font-family: FFDINWebProLight, Tahoma, Verdana, Segoe, sans-serif;*/ text-align: center; }
    .capabilities .columns.small-10 { text-align: left; }

    .capabilities .columns img { text-align: center; width: auto; height: 3rem; }

    .capabilities .columns h3 { text-transform: uppercase; font-family: FFDINWebProBold, Tahoma, Verdana, Segoe, sans-serif; font-size: 1rem; line-height: 3rem; margin-bottom: 0; white-space: nowrap; }
        .capabilities .columns h3:hover { color: #002266; }

    .capabilities .columns p::before { content: ""; display: table; clear: both; }


a.learn-more { font-size: .75rem; line-height: .75rem; text-transform: uppercase; padding: 10px 15px; display: inline-block; font-family: FFDINWebProBold; -webkit-transition: all .5s; /* Safari */ transition: all .5s; }

a.learn-more { display: none; }

/*Section Everything*/

section.everything h3 { color: #0099AA; }

section.everything a.learn-more { border: 1px solid #0099AA; color: #0099AA; }

    section.everything a.learn-more:hover { background-color: #0099AA; color: #fff; }

/*Section Everywhere*/

section.everywhere h3 { color: #991155; }

section.everywhere a.learn-more { border: 1px solid #991155; color: #991155; }

.capabilities section.everywhere a.learn-more:hover { background-color: #991155; color: #fff; }

/***** 415px breakpoint *****/
@media only screen and (min-width: 25.9375em) {
}

/***** 768px breakpoint *****/
@media only screen and (min-width: 48.0625em) {

    a.learn-more { display: inline-block; }

    .capabilities .tabs { height: 60px; }

    .capabilities .columns.medium-3 { width: 50%; }


    .capabilities .row-break { clear: both; margin-bottom: 1rem; }

    .capabilities .columns h3 { font-size: 1.2rem; }
    .capabilities .columns.small-10.medium-12 { padding-bottom: 3rem; }
    a.learn-more { position: absolute; bottom: 0; left: 20%; right: 20%; }

    .capabilities .tabs .tab-title a,
    .capabilities .tabs .tab-title.active a { height: 60px; font-size: 1.25rem; line-height: 60px; padding: 4px 0 0; }

        .capabilities .tabs .tab-title a span { display: inline-block; }

    .capabilities .tabs li.tab-title.everything + li.cap-divider { height: 60px; border-bottom: 60px solid #fff; }

    .capabilities .tabs li.tab-title.everything.active + li.cap-divider { border-bottom: 60px solid #0099AA; }
    .capabilities .tabs-content { padding: 3em 0 0; margin-bottom: 0; min-height: 460px; max-height: 500px; }
}

@media only screen and (min-width: 48.0625em) {

    .capabilities .columns.small-10 { text-align: center; margin-bottom: 0; padding: 0 2rem; }
    .capabilities .columns img { height: 4rem; }
}


/***** 1024px breakpoint *****/
@media only screen and (min-width: 64em) {

    .capabilities .tabs .tab-title.everything.active::before,
    .capabilities .tabs .tab-title.everywhere.active::before { height: 60px; }

    .capabilities .tabs-content { min-height: 450px; max-height: 600px; }

    .capabilities .columns { text-align: center; margin-bottom: 0; }

        .capabilities .columns h3 { font-size: 1.2rem; }

        .capabilities .columns.medium-3 { width: 25%; }
        .capabilities .columns img { height: 5.5rem; }
    .capabilities .row-break { clear: none; margin: 0; }

    .capabilities .tabs .tab-title a,
    .capabilities .tabs .tab-title.active a { letter-spacing: 1px; }
}

@media only screen and (min-width: 75em) {

    a.learn-more { left: 30%; right: 30%; }
}

.capabilities li.tab-title a:focus { outline: 0; }