/* 
    For top part of the component,
        use 'intersight-additional-offering--top' id and 'Additional Offering - 2 Column' variation.
    For bottom part of the component,
        use 'intersight-additional-offering--bottom' id and 'Additional Offering - 3 Column' variation.
    For button part of the component,
        use a Container component with id 'intersight-additional-offering--button' & layout (Default) and author Button component inside container.
*/


#intersight-additional-offering--top.cds-c-additional-offering {
    padding-bottom: 3.6rem;
}
#intersight-additional-offering--top .cds-c-additional-offering__title-hr {
    display: none;
}
#intersight-additional-offering--top .cmp-title__text {
    text-align: left;
}
#intersight-additional-offering--top .cmp-teaser__image .cmp-image {
    max-width: 288px;
    max-height: 210px;
    overflow: hidden;
}
#intersight-additional-offering--top .cds-c-additional-offering__head {
    margin-bottom: var(--size-space-xl);
}
#intersight-additional-offering--bottom.cds-c-additional-offering {
    padding-top: 0;
}
#intersight-additional-offering--bottom .cds-c-additional-offering__head {
    position: relative;
    margin-bottom: 3.6rem;
}
#intersight-additional-offering--bottom .cmp-title__text {
    font-size: var(--font-preset-body-l-size);
    font-style: var(--font-preset-body-l-style);
    font-weight: var(--font-preset-body-l-weight);
    letter-spacing: var(--font-preset-body-l-spacing);
    line-height: var(--font-preset-body-l-line-height);
    align-items: center;
    display: flex;
    flex-direction: row;
    color: var(--color-gray-80);
    text-align: center;
}
#intersight-additional-offering--bottom .cmp-title__text::before,
#intersight-additional-offering--bottom .cmp-title__text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E6E7E8;
}
#intersight-additional-offering--bottom .cmp-title__text::before {
    margin-right: var(--size-space-s);
}
#intersight-additional-offering--bottom .cmp-title__text::after {
    margin-left: var(--size-space-s);
}
#intersight-additional-offering--bottom.cds-c-additional-offering--halves .cds-c-additional-offering__title-hr{
    display: none;    
}
#intersight-additional-offering--button {
    text-align: center;
    margin-bottom: var(--size-space-xl);
}
html[dir='rtl'] #intersight-additional-offering--top .cmp-title__text {
    text-align: right;
}
html[dir='rtl'] #intersight-additional-offering--bottom .cmp-title__text::before {
    margin-left: var(--size-space-s);
    margin-right: 0;
}
html[dir='rtl'] #intersight-additional-offering--bottom .cmp-title__text::after {
    margin-right: var(--size-space-s);
    margin-left: 0;
}
@media only screen and (min-width: 600px) {
    #intersight-additional-offering--top.cds-c-additional-offering {
        padding-bottom: var(--size-space-xl);
    }
    #intersight-additional-offering--top .cmp-title__text {
        font-weight: 300;
    }
    #intersight-additional-offering--top .cmp-title__text,
    html[dir='rtl'] #intersight-additional-offering--top .cmp-title__text {
        text-align: center;
    }
    #intersight-additional-offering--top .cds-c-additional-offering__grid-wrapper .cmp-container,
    #intersight-additional-offering--bottom .cds-c-additional-offering__grid-wrapper .cmp-container {
        grid-template-columns: 1fr;
    }
    #intersight-additional-offering--top .cmp-teaser__image .cmp-image {
        max-width: 340px;
    }
    #intersight-additional-offering--bottom .cds-c-additional-offering__head {
        margin-bottom: var(--size-space-xl);
    }
    #intersight-additional-offering--bottom.cds-c-additional-offering {
        padding-bottom: var(--size-space-xl);
    }
    #intersight-additional-offering--button {
        margin-bottom: var(--size-space-3xl);
    }

    #intersight-additional-offering--top .cds-c-cards .cmp-image__image {
		max-height: 210px;
	}
}
@media only screen and (min-width: 1024px) {
    #intersight-additional-offering--top .cds-c-additional-offering__grid-wrapper .cmp-container {
        grid-template-columns: 1fr 1fr;
    }
    #intersight-additional-offering--top .cmp-teaser__image .cmp-image {
        max-width: 256px;
        max-height: 104px;
    }
    #intersight-additional-offering--bottom {
        padding-bottom: var(--size-space-3xl);
    }
    #intersight-additional-offering--bottom .cds-c-additional-offering__grid-wrapper .cmp-container,
    #intersight-additional-offering--bottom.cds-c-additional-offering--thirds .cds-c-additional-offering__grid-wrapper .cmp-container {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #intersight-additional-offering--bottom.cds-c-additional-offering--halves .cds-c-additional-offering__grid-wrapper .cmp-container {
        grid-template-columns: 1fr 1fr;
    }

    #intersight-additional-offering--bottom.cds-c-additional-offering {
        padding-bottom: var(--size-space-3xl);
    }
    #intersight-additional-offering--button {
        margin-bottom: var(--size-space-4xl);
    }
    #intersight-additional-offering--top .cds-c-cards .cmp-image__image {
		max-height: 104px;
	}
}
@media only screen and (min-width: 1440px) {
    #intersight-additional-offering--top .cmp-teaser__image .cmp-image {
        max-width: 302px;
        max-height: 144px;
    }
    #intersight-additional-offering--top .cds-c-additional-offering__head {
        margin-bottom: var(--size-space-3xl);
    }
    #intersight-additional-offering--top .cds-c-cards .cmp-image__image {
		max-height: 144px;
	}
}
/*
    insert category listing component
        set id of component to: intersight-category-listing
        uncheck setting for including domains
        update footer to set footer type to none 
        set elastic container settings within category listing to be 2 column
*/
#intersight-category-listing.cds-c-category-listing {
    padding: 48px 0;
}

#intersight-category-listing .cds-c-category-listing__image-wrapper {
    margin-bottom: 36px;
}

#intersight-category-listing .cds-c-category-listing__image-wrapper .cmp-image__image {
    max-height: 168px;
    max-width: 168px;
}

#intersight-category-listing .cds-c-category-listing__title-wrapper {
    margin-bottom: 48px;
}

#intersight-category-listing .cds-c-category-listing__title-wrapper .cmp-title__text {
    font-size: var(--font-preset-h300-size);
    font-style: var(--font-preset-h300-style);
    line-height: var(--font-preset-h300-line-height);
    font-weight: 300;
    letter-spacing: var(--font-preset-h300-spacing);
}

#intersight-category-listing .cds-c-elasticcontainer > .cds-l-grid  {
    grid-row-gap: 36px;
}

@media only screen and (min-width: 600px) {
    #intersight-category-listing.cds-c-category-listing {
        padding: 64px 0;
    }

    #intersight-category-listing .cds-c-category-listing__image-wrapper .cmp-image__image {
        max-height: 251px;
        max-width: 251px;
    }

    #intersight-category-listing .cds-c-category-listing__title-wrapper {
        grid-column: 1 / -3;
    }

    #intersight-category-listing .cds-c-elasticcontainer > .cds-l-grid  {
        grid-template-columns: 1fr;
    }
}

@media only screen and (min-width: 1024px) {
    #intersight-category-listing.cds-c-category-listing {
        padding: 80px 0;
    }

    #intersight-category-listing .cds-c-category-listing__image-wrapper {
        display: block;
        grid-column: 1 / -1;
        grid-row: 1 / 2;
    }

    #intersight-category-listing .cds-c-category-listing__title-wrapper {
        grid-column: 1 / -3;
        margin-bottom: 64px;
    }

    #intersight-category-listing .cds-c-category-listing__title-wrapper .cmp-title__text {
        font-size: var(--font-preset-h400-size);
        font-style: var(--font-preset-h400-style);
        line-height: var(--font-preset-h400-line-height);
        letter-spacing: var(--font-preset-h400-spacing);
    }

    #intersight-category-listing .cds-c-category-listing__content-wrapper {
        grid-column: 1/-2;
        margin-right: 48px;
    }

    #intersight-category-listing .cds-c-elasticcontainer > .cds-l-grid  {
        column-gap: 48px;
        grid-template-columns: 1fr 1fr;
        row-gap: 48px;
    }
    /*RTL*/
    html[dir="rtl"] #intersight-category-listing .cds-c-category-listing__content-wrapper {
        margin-left: 48px;
        margin-right: 0;
    }
}

@media only screen and (min-width: 1440px) {
    #intersight-category-listing .cds-c-category-listing__image-wrapper {
        grid-column: 1/4;
        grid-row: 1/3;
        padding-right: 96px;
    }

    #intersight-category-listing .cds-c-category-listing__title-wrapper {
        grid-column: 1/-1;
        grid-row: 1/2;
        margin-left: 347px; /*max image width + 96px*/
    }

    #intersight-category-listing .cds-c-category-listing__content-wrapper {
        grid-column: 1/-2;
        grid-row: 2/3;
        margin-left: 347px; /*max image width + 96px*/
    }
    /*RTL*/
    html[dir="rtl"] #intersight-category-listing .cds-c-category-listing__image-wrapper {
        padding-left: 96px;
        padding-right: 0;
    }

    html[dir="rtl"] #intersight-category-listing .cds-c-category-listing__title-wrapper {
        margin-left: 0;
        margin-right: 347px; /*max image width + 96px*/
    }

    html[dir="rtl"] #intersight-category-listing .cds-c-category-listing__content-wrapper {
        margin-left: 48px;
        margin-right: 347px; /*max image width + 96px*/
    }
}
/*
Follow the below steps to author the Image Intro + Features component:
- Drop a "Container" component and add ID “intersight-image-intro-features”
	- Drop a "Demo" component with in "Container" component
	- Drop a "Container - Grid" and select “Grid - Full” layout
		- Drop a "Title(V2)" component in "Container - Grid"/full grid
	- Drop a "Elastic Container (v2)" and enable "Show More" option if required
		- Drop and author "Cards" components with in the "Elastic Contianer (V2)"
*/

#intersight-image-intro-features h1, 
#intersight-image-intro-features h2, 
#intersight-image-intro-features h3, 
#intersight-image-intro-features h4, 
#intersight-image-intro-features h5, 
#intersight-image-intro-features p {
	font-weight: var(--font-weight-light);
}
#intersight-image-intro-features .cds-c-demo__media-wrapper {
	width: 100%;
}
#intersight-image-intro-features .cds-c-demo__cta-wrapper {
	margin-top: var(--size-space-s);
}
#intersight-image-intro-features .cds-c-demo__title {
    margin: 3.6rem 0 1.2rem;
}
#intersight-image-intro-features  .gridfullcol .cmp-title{
	margin-bottom: var(--size-space-xl);
}
#intersight-image-intro-features .containergrid .cmp-title * {
	font-size: var(--size-space-s);
	line-height: var(--size-space-m);
	text-align: center;
}
#intersight-image-intro-features .cds-c-elasticcontainer {
	margin-top: 0;
}
#intersight-image-intro-features .cds-c-elasticcontainer .cds-c-cards__wrapper {
	border: 1px solid var(--color-gray-5);
	border-radius: var(--size-space-s);
	padding: 3.6rem;
}
#intersight-image-intro-features .cds-c-elasticcontainer .cds-c-elasticcontainer__showmore-link {
	margin-top: var(--size-space-xl);
}
#intersight-image-intro-features .cds-c-elasticcontainer .cds-l-grid.cds-l-grid--thirds {
	grid-row-gap: var(--size-space-s);
}
@media only screen and (min-width: 600px) {
	#intersight-image-intro-features .cds-c-demo__title {
		margin: var(--size-space-xl) 0 1.2rem;
	}
    #intersight-image-intro-features .containergrid .cmp-title * {
		font-size: var(--size-space-m);
		line-height: 2.5;
	}
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-c-cards__wrapper {
		padding: var(--size-space-xl);
	}
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-l-grid.cds-l-grid--thirds {
		grid-column-gap: var(--size-space-s);
		grid-template-columns: var(--cds-l-grid-varMob);
	}
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-c-elasticcontainer__showmore-link {
		margin-top: var(--size-space-xl);
	}
}
@media only screen and (min-width: 1024px) {
	#intersight-image-intro-features .cds-c-demo__title {
		margin-top: 0;
	}
    #intersight-image-intro-features  .gridfullcol .cmp-title{
		margin-bottom: var(--size-space-3xl);
	}
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-l-grid.cds-l-grid--thirds {
		grid-template-columns: var(--cds-l-grid-varDesk);
	}
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-c-elasticcontainer__showmore-link {
		margin-top: var(--size-space-3xl);
	}
}
@media only screen and (min-width: 1440px) {
	#intersight-image-intro-features .cds-c-elasticcontainer .cds-l-grid {
		padding: 0 calc(var(--size-space-5xl) + 9.9rem);
	}
}
/*
ID to be used "intersight-integrations"
Component to be used "Integrations V2" with Variation "CISCO PRODUCTS" 
*/
#intersight-integrations .cds-c-integrations__title .cmp-title__text {
    font-weight: var(--font-weight-light);
}    
#intersight-integrations .cds-c-integrations__cards-wrap .cds-c-cards{
	padding: var(--size-space-2xl) 3.6rem 3.6rem 3.6rem;
	box-shadow: 0 .4rem 1.6rem rgba(0, 0, 0, 0.07);
}
#intersight-integrations .cds-c-cards .cmp-teaser__image {
    display: flex;
	margin-bottom: 16px;
    place-content: center;
}
#intersight-integrations .cds-c-cards .cmp-teaser__image  img{
	width: 6.0rem;
}
#intersight-integrations .cds-c-integrations__cards-wrap .cds-c-cards.cmp-teaser {
    margin-bottom: var(--size-space-s);
}
#intersight-integrations .cds-c-cards__wrapper:last-child .cds-c-cards {
    margin-bottom: 0;
    height: 100%;
}
@media only screen and (min-width: 600px){
	#intersight-integrations .cds-c-integrations__cards-wrap .cds-c-cards{
		box-shadow: 0 .8rem 3.2rem rgba(27, 28, 29, 0.1);
		padding: var(--size-space-2xl) 4.8rem 4.8rem 4.8rem;
		height: calc(100% - var(--size-space-s));
	}
	#intersight-integrations .cds-c-integrations__cards-wrap .cmp-container {
	    grid-template-columns: repeat(1, 1fr);
	}
	#intersight-integrations .cds-c-integrations__title,
	#intersight-integrations .cds-c-integrations__content {
    	grid-column: 2/-2;
    }
}

@media only screen and (min-width: 1024px){
	#intersight-integrations .cds-c-integrations__cards-wrap .cmp-container {
	    grid-template-columns: repeat(3, 1fr);
	}
	#intersight-integrations .cds-c-integrations__cards-wrap .cds-c-cards{
		padding: var(--size-space-2xl) 4.8rem 4.8rem 4.8rem;
		height: 100%;
		margin-bottom: 0;
	}
	#intersight-integrations .cds-c-integrations__button{
		margin-top: var(--size-space-3xl);
	}
	#intersight-integrations .cds-c-integrations__content {
	    grid-column: 1/-1;
	}
	#intersight-integrations .cds-c-integrations__title{
    	grid-column: 2/-2;
	}
	#intersight-integrations .cds-c-integrations__content {
	    grid-column: 1/-1;
	}
	#intersight-integrations .cds-c-integrations__cards-wrap .cmp-container {
    	grid-column-gap: var(--size-space-s);
    }
}

@media only screen and (min-width: 1440px){
#intersight-integrations .cds-c-integrations__title{
    	grid-column: 3/-3;
	}
	#intersight-integrations .cds-c-integrations__content {
	    grid-column: 2/-2;
	}
}
/*
    insert integrations V2 component
        set id of component to: intersight-integrations-image-adjustment
        set style system option to: CISCO PRODUCTS
*/
#intersight-integrations-image-adjustment .cds-c-cards .cmp-teaser__image {
    margin-bottom: 32px;
}
/*added 6/22, overrides for div carousel intro highlight area image treatments for illustrations*/
.cds-c-div-carousel-intro .cds-c-highlight .cmp-teaser__image img {
    max-height: 225px;
    object-fit: contain;
}

@media only screen and (min-width: 1440px) {
	.cds-c-div-carousel-intro .cds-c-highlight .cmp-teaser__image img {
		object-fit: contain;
	}
}

@media only screen and (min-width: 1024px) {
	.cds-c-div-carousel-intro .cds-c-highlight .cmp-teaser__image img {
		max-height: 300px;
		object-fit: contain;
	}
}