/**
 * cisco-portal.css
 * 
 * Styles the Cisco Portal Overview page.
 * 
 * Index
 * 
 * - Common Styles: Cisco Portal Overview page
 * - Hero Slider: Content
 * - Hero Slider: Previous and Next Buttons
 * - Hero Slider: Pagination Dots
 * - Hero Section: Stacked Sections
 * - Cisco Resources Overview: Tab Titles
 * - Cisco Resources Overview: Tab Titles Fixed to Top of page on scroll
 * - Cisco Resources Overview: Tab Content
 * - Cisco Resources Overview: CTA
 * - Success Stories Section: Slider Content
 * - Cisco Resources Section
 * - Help & Support Section
 * - Footer
 * 
 */

/*-----------------------------------------------------------------------
# Common Styles: Cisco Portal Overview page
------------------------------------------------------------------------*/

.cisco-portal-page, 
.cisco-portal-tour-page {
    position: relative;
    height: 100%;
}

.cisco-portal-page .h1 { text-align: center; }

.cisco-portal-page .arrow-down { 
    position: relative;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    font-weight: 700;
}

.cisco-portal-page .arrow-down:hover:after {
    background: url(../../../img/icons/arrow-down-hovered.png) 0 0 no-repeat;
}

.cisco-portal-page .arrow-down:after {
    content: '';
    position: absolute;
    top: 60%;
    -webkit-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -o-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    transform: translateY(-60%);
    height: 16px;
    width: 16px;
    background: url(../../../img/icons/arrow-down.png) 0 0 no-repeat;
}

.cisco-portal-page .arrow-down span {
    padding-right: 8px;
}

/*-----------------------------------------------------------------------
# Hero Slider: Content
------------------------------------------------------------------------*/

.cisco-portal-page .hero-section { background: rgba(242, 249, 255, 0.5); }

.hero-section > .group { display: flex; }

.slider-cisco-hero {
    position: relative;
    margin: 0;
}

.slider-cisco-hero:after {
    content: '';
    height: 90%;
    width: 1px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #DDDDDD;
}

.cisco-hero-slide {
    padding: 40px 80px;
    min-height: 560px;
    text-align: center;
}

.cisco-hero-slide > .group { margin-top: 20px; }

.cisco-hero-slide-left,
.cisco-hero-slide-right {
    min-height: 340px;
}

.cisco-hero-slide-left {
    text-align: center;
    position: relative;
}

.cisco-hero-slide-left img {
    display: inline-block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0;
    left: 0;
    margin: 0 auto;
}

.cisco-hero-slide-right {
    position: relative;
    padding-left: 40px;
}

.cisco-hero-slide-right .content-wrapper {
    text-align: left;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.slick-slide img { display: inline-block; }

.cisco-hero-slide-right .content-wrapper .h1 { 
    font-size: 2.25rem;
    line-height: 3rem;
    text-align: left;
    margin: 0 0 16px;
}

.cisco-hero-slide-right .content-wrapper .btn {
    margin-top: 20px;
}

.cisco-hero-cta {
    margin: 0 0 40px;
}

.cisco-hero-cta .col {
    height: 60px;
    position: relative;
}

.cisco-hero-cta p {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: right;
    line-height: 60px;
}

.cisco-hero-cta .btn {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/*-----------------------------------------------------------------------
# Hero Slider: Previous and Next Buttons
------------------------------------------------------------------------*/

button.slick-next, 
button.slick-next:hover, 
button.slick-prev, 
button.slick-prev:hover {
    bottom: 32px;
    top: auto;
    transform: none;
}

.slider-cisco-hero button.slick-next, 
.hero-slider button.slick-next:hover {
    right: 35%;
    background: url(../../../img/icons/arrow-right-gray.png) no-repeat center center;
  }
  
.slider-cisco-hero button.slick-prev, 
.hero-slider button.slick-prev:hover {
    left: 35%;
    background: url(../../../img/icons/arrow-left-gray.png) no-repeat center center;
}
  
/*-----------------------------------------------------------------------
# Hero Slider: Pagination Dots
------------------------------------------------------------------------*/

.slider-cisco-hero .slick-dots { bottom: 48px; }

.slider-cisco-hero .slick-dots li { margin: 0 12px; }

.slider-cisco-hero .slick-dots li button { position: relative; }

.slider-cisco-hero .slick-dots li.slick-active button::before,
.slider-cisco-hero .slick-dots li button::before {
    height: 18px;
    width: 18px;
    background-color: #fff;
    border: 1px solid #999999;
    -webkit-border-radius: 50px;
            border-radius: 50px;
}

.slider-cisco-hero .slick-dots li.slick-active button::before {
    opacity: 1;
    content: '';
    position: absolute;
    top: 0;
    background: #fff url(/Site/Content/Images/icons/slider-dot.png) no-repeat center center;
}

.slider-cisco-hero .slick-dots li button::before { color: transparent; }

.slider-cisco-hero .slick-dotted.slick-slider { margin-bottom: 0; }

/*-----------------------------------------------------------------------
# Hero Section: Stacked Sections
------------------------------------------------------------------------*/

.hero-section .col { margin: 0; }

.hero-stacked-section {
    padding: 0 52px;
    position: relative;
}

.hero-stacked-section:nth-of-type(1) { 
    padding-top: 48px;
    padding-bottom: 28px;
}

.hero-stacked-section:nth-of-type(2) { 
    padding-top: 28px;
    padding-bottom: 48px;
}

.hero-stacked-section:first-of-type:after {
    content: '';
    width: 90%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #DDDDDD;
}

.hero-stacked-section .h4 { margin-bottom: 16px; }

.hero-stacked-section .single-event:not(:first-of-type) {
    margin-top: 16px;
}

.hero-stacked-section .single-event:last-of-type {
    margin-bottom: 16px;
}

.hero-stacked-section .event-date {
    font-size: 0.75rem;
    line-height: 24px;
    color: #999999;
    font-weight: 400;
}

.hero-stacked-section .post-link {
    font-weight: 300;
    line-height: 1.4;
    display: block;
}

.hero-stacked-section .arrow-right { margin-top: 8px; }

.hero-stacked-section .post-link:not(:first-of-type)  {
    margin-top: 16px;
}

.blog-overview .post-link:nth-of-type(3) {
    margin-bottom: 20px;
}

.blog-overview { display: none; }

/*-----------------------------------------------------------------------
# Cisco Resources Overview: Tab Titles
------------------------------------------------------------------------*/

.cisco-resources-overview { margin: 80px 0 0; }

.cisco-resources-overview .tabs { margin-top: 80px; }

.cisco-resources-overview .ui-tabs .ui-tabs-nav { width: 100%; }

.cisco-resources-overview li.ui-tabs-active .inactive-img,
.cisco-resources-overview li:not(.ui-tabs-active) .active-img { 
    display: none;
}

.cisco-resources-overview .tab-titles { min-width: 942px; }
 
.cisco-resources-overview .tab-titles img {
    max-height: 24px;
    width: auto;
    margin-bottom: 20px;
}

.cisco-resources-overview .ui-tabs-anchor { position: relative; }

.cisco-resources-overview .ui-tabs-anchor .h4 { 
    font-size: 0.95rem;
    line-height: 46px;
}

.cisco-resources-overview .ui-tabs .ui-tabs-nav li.ui-tabs-active:after {
    position: absolute;
    bottom: 0;
    width: 80%;
    left: 0;
    right: 0;
}

/*-----------------------------------------------------------------------
# Cisco Resources Overview: Tab Titles Fixed to Top of page on scroll
------------------------------------------------------------------------*/

/* Initial state of tab titles in fixed background */

.tab-titles.fixed-top {
    position: fixed;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1280px;
    max-height: 47px;
    opacity: 0;
}

/* Initial state of fixed nav background */
.fixed-top-background {
    height: 0;
    position: fixed;
    top: 0;
    background: #fff;
    left: 0;
    right: 0;
    padding: 0 2.5%;
    -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.25);
    box-shadow: 0 1px 7px 0 rgba(0,0,0,0.25);
    -webkit-transition: all ease 0.4s;
    -o-transition: all ease 0.4s;
    -moz-transition: all ease 0.4s;
    transition: all ease 0.4s;
}

/* Animated state of tab titles background */
.fixed-top-background.slide-down {
    height: 46px;
}

.tab-titles.fixed-top.titles-animate {
   -webkit-transition: all ease 1s;
   -o-transition: all ease 1s;
   -moz-transition: all ease 1s;
   transition: all ease 1s;
   opacity: 1 !important;
}

.cisco-resources-overview .ui-tabs .ui-tabs-nav.fixed-top img { display: none; }

.cisco-resources-overview .ui-tabs .ui-tabs-nav.fixed-top h4 { margin-top: 12px; }

.cisco-resources-overview .ui-tabs-anchor { cursor: pointer; }

/*-----------------------------------------------------------------------
# Cisco Resources Overview: Tab Content
------------------------------------------------------------------------*/

.cisco-resources-section {
    padding-top: 40px;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
} 

/* .cisco-resources-section .col.span-7-of-12 { text-align: center; } */

.cisco-resources-section .h2 { margin-bottom: 20px; }

.cisco-resources-section .description-text { margin-bottom: 20px; }

.cisco-resources-section.right-align img { float: right; }

/*-----------------------------------------------------------------------
# Cisco Resources Overview: CTA
------------------------------------------------------------------------*/

.resources-cta {
    padding: 80px 0;
    text-align: center;
}

.resources-cta p {
    margin: 28px 0;
    font-size: 20px;
    font-weight: 200;
}

/*-----------------------------------------------------------------------
# Success Stories Section: Slider Content
------------------------------------------------------------------------*/

.success-stories {
    background: #F8FCFF;
    padding: 80px 0;
}

.success-stories .h1 { margin-bottom: 60px; }

.success-stories > .group {
    display: flex;
}

.success-stories .col { 
    text-align: center; 
    padding: 0 8px;
    flex: 1;
    position: relative;
}

.success-stories .col .btn {
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.success-stories .col:first-of-type { padding: 0 8px 0 0; }
.success-stories .col:last-of-type { padding: 0 0 0 8px; }

.logo-container {
    display: block;
    background: #fff;
    border: 1px solid #999999;
    position: relative;
    height: 200px;
}

.logo-container img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.success-stories .description-text {
    margin: 40px 0 80px;
    padding: 0 20px;
}

/*-----------------------------------------------------------------------
# Cisco Products Section
------------------------------------------------------------------------*/

.cisco-products-section { padding: 80px 0 0; }

.products-row { display: flex; }

.products-row:nth-of-type(1) { margin-top: 100px; }

.products-row:nth-of-type(2) { margin-top: 160px; }

.products-content {
    padding-right: 80px;
    flex: 1;
    position: relative;
}

.products-content a.title-wrap {
    display: table;
    color: #454545;
}

.products-content .title-wrap .products-title,
.products-content .title-wrap img {
    display: inline-block;
    vertical-align: middle;
}

.products-content .title-wrap {
    margin: 0 0 32px;
}

.products-content .description-text {
    margin: 0 0 40px;
}

.products-content .title-wrap .products-icon { 
    max-height: 30px; 
    width: auto;
}

.products-content .title-wrap .products-title{
    margin-left: 16px;
}
/* 
.additional-resource:link,
.additional-resource:visited {
    display: block;
    text-decoration: underline;
    line-height: 1.8rem;
} */

.cisco-portal-page .arrow-right {
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    font-weight: 700;
    position: relative;
}

.cisco-portal-page .products-content .arrow-right {
    position: absolute;
    bottom: 0;
}

.cisco-portal-page .arrow-right:hover:after {
    background: url(/Site/Content/Images/icons/arrow-right-large-hovered.png) 0 0 no-repeat;
}

.cisco-portal-page .arrow-right:after {
    content: '';
    position: absolute;
    top: 60%;
    -webkit-transform: translateY(-60%);
    -ms-transform: translateY(-60%);
    -moz-transform: translateY(-60%);
    -o-transform: translateY(-60%);
    transform: translateY(-60%);
    height: 16px;
    width: 16px;
    background: url(/Site/Content/Images/icons/arrow-right-large.png) 0 0 no-repeat;
}

.cisco-portal-page .arrow-right span { padding-right: 8px; }

/*-----------------------------------------------------------------------
# Help & Support Section
------------------------------------------------------------------------*/

.cisco-support-section { padding: 80px 0 0; }

.cisco-support-wrapper { margin-top: 60px; }

.icn-wrap {
    height: 140px;
    width: 140px;
    background: #EEEEEE;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all ease 0.3s;
    -webkit-border-radius: 50%;
            border-radius: 50%;
}

.cisco-support-option { text-align: center; }

.icn-content-wrap {
    position: relative; 
    opacity: 0; 
}

.icn-wrap { 
    position: relative; 
    display: inline-block;
}

.icn-wrap:hover { background: #DDDDDD; }

.icn-wrap img {
    display: inline-block;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    margin: 0 auto;
    left: 0;
    right: 0;
}

.cisco-support-option h2 { 
    margin: 24px 0 40px;
    color: #454545;
    -moz-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.cisco-support-option h2:hover { color: #2375BB; }

.cisco-support-option .description-text { text-align: center; }

/*-----------------------------------------------------------------------
# Footer
------------------------------------------------------------------------*/

footer {
    /* margin-top: 40px;*/
    /*text-align: center;*/
}

footer img { display: inline-block; }