:root {
        --font: proxima-nova;
        --alt-font: museo-sans;
        --accent-color: #000000;
        --secondary-color: #757575;
        --link-color: #2b59c3;
        --accent-highlight-color: #000000;
        --accent-highlight-background-color: #cccccc;
        --accent-tinted-color-70: #b3b3b3;
        --accent-tinted-color-80: #cccccc;
        --accent-tinted-color-90: #e6e6e6;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #1a1a1a;
        --secondary-hover-color: #8f8f8f;
        --secondary-contrast-color: #fff;
        --link-hover-color: #7495e0;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/8o614p01h0n3-background.png'); background-repeat: repeat; background-size: auto; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/ie8qk0h7zc2e-sessionm-learning-hub-logo-horizontal-2x.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/* color variables */
:root {
  --neutral-1: #FFFFFF;  
  --neutral-2: #FAFAFB;
  --neutral-3: #F5F5F6;
  --neutral-4: #D7D7DA;
  --neutral-5: #AFAFB5;
  --neutral-6: #090A0C;
  --neutral-7: #343439;
  --neutral-8: #555557;
  
  --text: #363747;
  --text-light: #727272;
  --text-dark: #181821;

  --primary: #2B59C3;
  --primary-light-1: #769BDB;
  --primary-light-2: #A2BEE8;
  --primary-light-3: #D3E1F5;
  --primary-light-4: #F0F7FF;
  --primary-dark-1: #1A3D9C;
  --primary-dark-2: #0E2675;
  --primary-dark-3: #06144F;

  --secondary-1:#9A3264;
  --secondary-2:#227D9A;
  --functional-1:#24870E;
  --functional-1-trans:#24870E30;
  --functional-2:#FF783F;

}

/* hide manage cookie button in manager view */
body.manager #ot-sdk-btn.ot-sdk-show-settings {display:none;}

/* adjust max width to our standard of 1440px */
.container {
  max-width:1440px;
}



/* LOGIN SCREEN*/

/* overall logion screen with background image*/
.session{
  background-image:url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/r8g16cm11qlb-login.png");
  background-size:60vw auto;
  background-repeat: no-repeat;
  margin:10vw;
  background-position: top right;
  background-color: #fcfcfc;
  padding-top:70px;
}

/*adjust the input fields for login*/
.session input[type=email], .session input[type=password]{
  background-color:var(--neutral-2); 
  border:1px solid var(--neutral-5);
  color:var(--text);
  margin-bottom:2rem;
}

/*small adjustments to the login box*/
.session .session__container{
  border:0;
  border-bottom:80px solid var(--neutral-2);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  border-radius: 4px; 
  padding:1rem 2rem;      
}
/*Hiding "Language" category in Catalog. With Custom Fields, it's "last of type" -- if using Curated Catagories, "Language" is first of type. */
.catalog-aggregation:last-of-type{display:none;}

/*override for Tag catalog*/
.custom-catalog-tags .catalog-aggregation:first-of-type{display:none;}
.custom-catalog-tags .catalog-aggregation:last-of-type{display:block;}


/* adjust logo size and spacing*/
.session .company__beta-logo img{max-width:250px; margin-top:20px; margin-bottom:20px}

/* Adjust the Sign In header text*/
.session__form h2{text-align: left;font-size:1.2rem;padding:24px 0 32px 0;}

/* fix alignment for the fogot password link*/
.session__forgot{display: block; text-align: right;}
.session__forgot a.btn--link{color:var(--primary); font-size:.9rem;}

/* fix the spacing and position for the Sign In button */
.session .session__container input[type=submit].btn--right{position: absolute; bottom:-80px; right:20px;}
.session .session__container input[type=submit].btn--no-margin{bottom:-60px;}



/* USER ACCOUNT SCREEN */

  /* spacing for Account & Info header */
  .header--subtitle {padding:2rem 3rem 0 3rem;}

  /* hide the lines above and below the header text*/
  .header--subtitle hr{display: none;}

  /* increase page padding to be consistent */
  .dashboard-account {padding:0 2rem;}

  /* add vertical spacing between account tabs */
  .dashboard-account-tabs li{margin-bottom:1.5rem}

  /* add rounded corners to tabs */
  .dashboard-account-tab{border-radius:8px;}

  /* style the active tab with correct colors and text sizes */
  .dashboard-account-tab--active{background-color:var(--primary); }
  .dashboard-account-tab--active:hover, .dashboard-account-tab--active:focus{background-color:var(--primary-dark-1);}
  .dashboard-account-tab--active:active{background-color:var(--primary-dark-2);}
  .dashboard-account-tab--active button{color:var(--neutral-1); font-weight:100;font-size:1.2rem;}
  .dashboard-account-tab--active button:hover{color:var(--neutral-1);}

  /* style the inactive tab with correct colors and text sizes */
  .dashboard-account-tab--inactive{background-color:var(--neutral-3);}
  .dashboard-account-tab--inactive:hover, .dashboard-account-tab--inactive:focus{background-color:var(--primary-light-4);}
  .dashboard-account-tab--inactive:active{background-color:var(--primary-light-3);}
  .dashboard-account-tab--inactive button{color:var(--text-dark);font-size:1.2rem;}

  /* fix the avatar upload dropspot and container */
  .dashboard__user__avatar-upload{border-radius:75px; border:2px dashed var(--primary-light-1); background-color:var(--neutral-2); display:flex;}
  .dashboard__user__avatar-upload .input__container{align-self: center;}
  .dashboard__user__avatar-upload span{text-transform:none; color:var(--text-light); font-weight:400;}

  /* adjust font and styling for the headers of each section */
  .dashboard--content-panel .section__header{background:transparent; border:0; box-shadow:0;}
  .dashboard--content-panel .section__header .section__title{font-size:1.2rem; text-transform: none; margin-top:1rem;}

  /* fix color for save button */
  .btn--primary--manager--new{background-color:var(--primary)}
  .btn--primary--manager--new: hover;{background-color:var(--primary-dark-1)}

  /* styling of text that says "You are currently logged in as: " */
  .dashboard-account .dashboard--content-panel .section-container form div p{
    background-color:var(--neutral-3);
    border-radius:4px;
    display: inline-block;
    padding:8px 12px;
  }

  /* fix width and border for Change Password button */
  .section__body .panel--alt{border:0;}
  .section__body .panel--alt .btn--expand{width:auto;display: inline-block;}



/* HEADER/NAVIGATION */

  /* slight adjustment to make header less tall */
  .nav ul a, .nav ul button{padding:1rem 1rem 0 1rem;}
  
  /* header logo size */
  .header .company__beta-logo{max-width:300px; margin:12px 0;}
  .dashboard-header-dropdown__link{margin-top:10px;}
  
  /* padding for overall heading */
  .header--microsite, .header--dashboard{padding:0 3rem;}
  
  /* hide the line between logo and school name */
  .company__school-name__divider{border:0;margin:0 .5em;}

  /* adjust school name size and weight */
  .company__school-name{
    text-transform: none;
    font-size:1.1rem;
    font-weight:500;
  }

  /* main navigation bar */
  .top-bar{
    border-top:none;
    margin-left:-3rem;
    margin-right:-3rem;
    background-color:var(--neutral-3);
    border-bottom:1px solid var(--neutral-4);
    padding:.5rem 1.5rem;
    height:auto;
  }

  /* remove default background and styling for list items in nav */
  .top-bar-section ul li{background-color:transparent;}
  .top-bar-section li:not(.has-form) a:not(.button){
    background: transparent;
    font-size:.9rem;
    font-weight:400;
    font-family: Proxima Nova,Helvetica Neue,Helvetica,Arial,sans-serif;
  }
  .navigation-bar .top-bar-section ul li>a{text-transform: none;}

  /* remove extra border on nav list */
  .navigation-bar .top-bar-section ul.left{border-bottom:0;}

  /* remove drop shadow border and spacing for drop down list items */
  .navigation-bar .dropdown li{box-shadow: none;}
  .top-bar-section ul li{padding:0;}

 /* make navbar full width and add a bottom border */
  .widget--navbar{
    background-color:var(--neutral-3);
    border-bottom:1px solid var(--neutral-4);
  }

  /* remove bottom line and adjust padding and margin for nav */
  .widget--navbar .top-bar{
    border-bottom:0;
    padding:0;
    margin-left:0;
    margin-right:0;
  }

  /* increase padding to navbar links */
  .navigation-bar .top-bar-section li:not(.has-form) a:not(.button){line-height: 3rem;}

  /* decrease font size for navbar dropdown menu items */
  .navigation-bar .dropdown li:not(.has-form) a:not(.button){font-size:.9rem;}

  /* updated background color for topnav*/
  .navigation-bar .top-bar-section .dropdown li:not(.has-form):not(.active):hover>a:not(.button), 
  .navigation-bar .top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button), 
  .navigation-bar .top-bar-section li:not(.has-form) a:not(.button):focus, 
  .navigation-bar .top-bar-section li:not(.has-form) a:not(.button):hover, 
  .navigation-bar .top-bar-section ul li:hover:not(.has-form)>a{
    background-color:var(--neutral-3);
  }

  /* adjust location for dropdown caret in topnav */
  .navigation-bar .top-bar-section .has-dropdown>a:after, 
  .navigation-bar .top-bar-section .navigation-widget__item--has-dropdown>a:after{
    top:1.5rem;
    margin-top:-2.5px;
  }



/* LEARNER DASHBOARD */

  /* add padding between widgets on dashboard*/
  .learn.dashboard .widget{padding: 1rem 3rem 5rem 3rem;}
  .learn.dashboard .widget--html{padding-bottom:0}

  /* remove padding when dashboard widget is a title */
  .learn.dashboard .widget--navbar, .learn.dashboard .widget--title{padding-bottom:1rem}

  /* update styling for stats widget */
  .dashboard-stats__container{box-shadow:none;}
  .dashboard-stats>li{max-width:350px;min-width:150px;}
  .dashboard-stat{border-radius:16px; background: var(--neutral-1)}
  .dashboard-stat__icon{font-size:1.3rem; padding-right:6px;}
  .dashboard-stat__label{font-size:1rem; text-transform:none;}

  /* colors for stats widget numbers */
  .dashboard-stat--available .dashboard-stat__value{color:var(--secondary-1)}
  .dashboard-stat--started .dashboard-stat__value{color:var(--primary)}
  .dashboard-stat--completed .dashboard-stat__value{color:var(--functional-1)}

  /* hide the collaboration tile that we don't use */
  .dashboard-stat--collaborations{display: none;}

  /* Your Content:  adjust styling for widget */
  .dashboard-access{
    border:0;
    width:clamp(100px, 80vw, 1340px);
    margin:auto;
  }  

  /* Your Content: styling for tabs */
  .dashboard-access-tabs{
    background:none;
    border-bottom:0;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
  }
  .dashboard-access-tab{border:0;}
  .dashboard-access-tabs .btn{font-size:.8rem;white-space: nowrap;}
  .dashboard-access-tab--active{border-bottom:4px solid var(--primary);}
  .dashboard-access-tab--active button{color:var(--primary-dark-2);}
  .dashboard-access-tab__count{border:2px solid var(--primary-light-1)}

  /* Your Content:  remove borders for listing of courses */ 
  .dashboard-access-list-item{border-bottom:0;}

  /* Your Content:  adjust styling for course list expander carat and description */
  .dashboard-access-list-item-expander i{color:var(--primary); font-size:1.2rem;}
  .dashboard-access-list-item__description{font-size:.9rem;}

  /* Your Content:  adjust styling for course listing engagement stats (when expanded) */
  .user-engagement-stats .user-engagement-stat{display:flex;flex-direction: column-reverse;}
  .user-engagement-stat:before{background-color: transparent;}
  .user-engagement-stat--collaborations, .user-engagement-stat--hours, 
  .user-engagement-stat--percent-complete, 
  .user-engagement-stat--assignments, .user-engagement-stat--lessons
  {color:var(--primary)}
  .user-engagement-stat__label
  {text-transform: none; font-size:.9rem; padding-right:0;}
  .user-engagement-stat__value-container i{vertical-align: middle;}
  .user-engagement-stat__value--percent{vertical-align: middle;font-size:1rem}

  /* Your Content:  hide all the engagement stats and elements we don't want */
  .user-engagement-stats .user-engagement-stat--percent-viewed, 
  .user-engagement-stats .user-engagement-stat--assessments, 
  .user-engagement-stats .user-engagement-stat--lessons:last-of-type,
  .user-engagement-progress-bar,
  .user-engagement-stats .user-engagement-stat__label-hint
  {display:none;}

  .dashboard-stat--certificates{display: none;}

  .layout__content .widget.gray-box, .container .widget.gray-box{
   background-color: var(--neutral-3);
   padding:32px;
   margin: 0; 
   width:auto;
  }
  .layout__content .widget.gray-box .row{
    display: flex;
    align-items: center;
  }
  .layout__content .widget.gray-box .row a{
    margin-bottom: 0;
  }
  .layout__content .widget.gray-box .columns:last-child p{
    text-align: right;
  }


/* HERO IMAGE */

  /* adjust padding for main hero section */
  .hero{padding:0 1.5rem;}
  .layout__content .hero{margin-bottom:0}

  /* size the main hero image (non-logged in homepage) based on viewport */
  .hero img{
    float:right;
    height:13vw;
    width:auto;
    margin-right:6vw;
  }
  .subpage .hero img{height: 15vw;}

  /* small adjustment for the webinars hero image margin */
  .webinars .hero img{
    margin-right:0;
  }

  /* adjust styling and plaement of hero text section */
  .hero .hero__caption{
    background:none;
    top:1em;
    left:1.5rem;
    width:clamp(200px, 50vw, 800px);
  }
  .hero .hero__caption .hero__title{
    font-size:clamp(36px, 3.3rem, 44px);
    font-weight:700;
  }  
  .subpage .hero .hero__caption .hero__title{font-size:clamp(24px, 3.3rem, 32px);}  

  .hero .hero__caption span{
    display: block;
    font-size:1.3rem;
    font-weight:200;
    margin-bottom:2rem;
  }
  .subpage .hero .hero__caption span{font-size:1.5rem;}

  /* adjust treatment of hero section for learner dashboard */
  .learn.dashboard  .widget--hero-image{padding:0 0 0 2rem;}
  .dashboard-hero .hero img{
    height:clamp(250px, 25vw, 500px);
    width:auto;
    margin-right:-4vw;
  }



/* WEBINARS */

  /* adjust design for next webinar box */
  .box-element{
    border-radius: 16px;
    background:var(--neutral-1);
    border:1px solid var(--neutral-4);
    padding:24px;
  }
  .box-element .box-heading{
    display: flex;
    justify-content: space-between;
  }
  .box-element .box-heading .box-subhead{color:var(--text-light);}
  .box-element .box-heading .box-date, .webinar-past .box-date{
    color:var(--text-dark);
    font-weight:500;
  }
  .box-element h3.box-title, .webinar-past h3.box-title{
    font-size:110%;
    font-weight:500;
    color:var(--text-dark);
  }
  .box-element .box-buttons{text-align:right;}
  .box-element .box-buttons a.btn{margin:10px 0 0 20px;}
  .box-element.webinar-page{
    width:70%;
    margin:70px auto 0;
  }


  /* adjust spacing and layout for Upcoming Webinar section */
  .upcoming{background:var(--neutral-1);}
  .upcoming .webinar-block{
    margin-top:0;
    padding:24px 0;
    border-bottom:1px solid var(--neutral-4);
  }
  .upcoming .webinar-block figure{margin:0;}
  .upcoming .webinar-block figure img{border-radius: 18px;}
  .upcoming .webinar-block .box-element{
    background:none;
    border:0;
    padding:12px;
  }

  /* adjust styling for Past Webinar section */
  .past-webinars{
    background-color: var(--neutral-1);
    border:1px solid var(--neutral-4);
    padding:24px;
    border-radius: 24px;
  }
  .webinar-past{
    background-color: var(--neutral-2);
    border-radius: 24px;
    padding:16px;
  }
  .webinar-past .webinar-link{
    color:var(--primary);
    display: block;
    text-align: right;
  }

  /* CONTENT CATALOG */
  /* Adding styling to the catalog filter removal text to make a pill rather than just text */
  .catalog-active-filter__remove {
    border-radius: 20px;
    padding: 3px 6px;
    background-color:var(--neutral-4);
}

/* LEARNING PATHS */

  .learning-paths{
    background:var(--neutral-3);
    text-align: center;
    margin:0 -48px;
    padding:48px;
  }
    .learning-paths-pano{
    background:var(--neutral-1);
    text-align: center;
    margin:0 -48px;
    padding:48px;
  }
  .learning-paths h2{font-size:2rem;font-weight:700;}
  .learning-paths > p{max-width:650px;margin:0 auto 1rem auto;}
  .lp-tab{
    cursor: pointer;
    padding:6px 16px;
    display:inline-block;
    font-size:1rem;
    font-weight:500;
  }
  .lp-radio{display:none;}
  #one:checked ~ .lp-tabs #one-tab,
  #two:checked ~ .lp-tabs #two-tab,
  #three:checked ~ .lp-tabs #three-tab{
    color:var(--neutral-1);
    border-radius:20px;
  }
  #one:checked ~ .lp-tabs #one-tab{background:var(--secondary-2);}
  #two:checked ~ .lp-tabs #two-tab{background:var(--primary);}
  #three:checked ~ .lp-tabs #three-tab{background:var(--functional-1);}

  .lp-panels{
    min-height:200px;
    width:100%;
    max-width:880px;
    border-radius:3px;
    overflow:hidden;
    padding:20px;  
    margin:0 auto;
  }

  .lp-panel{
    display:none;
    animation: fadein .8s;
  }

  @keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
  }

  .lp-panel-title{
    font-size:1.5em;
    font-weight:bold;
  }

  #one:checked ~ .lp-panels #one-panel,
  #two:checked ~ .lp-panels #two-panel,
  #three:checked ~ .lp-panels #three-panel{
    display:flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
  }

  .lp-pathcontent{position: relative; padding-bottom:40px}

  .lp-path{
    background:var(--neutral-1);  
    border-radius:24px;
    padding:20px;
    display: flex;
    width:400px;
    text-align: left;
    position: relative;
  }

  .lp-path h3{margin-top:0; margin-bottom:0;font-size:1.5rem;}

  .lp-path p{margin:.8rem 0;}
  .lp-path:hover, .lp-path:focus{background:var(--neutral-2);}
  .lp-path:active{background:var(--neutral-3);}

  .lp-path > img{
    float:left;
    padding-right:20px;
    height:150px;
    align-self:center;
  }
  .lp-path > a{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right:0;
    bottom:50px;
  }

  .lp-legend{
    background:var(--neutral-3);
    display: grid;
    grid-gap:12px;
    grid-template-columns:auto auto auto auto;
    border-radius: 12px;
    padding:10px;
    vertical-align: middle;
    font-size:.9rem;
    position: absolute;
    bottom:0px;
  } 

  .lp-legend img{
    height:16px;
    vertical-align: middle;
  }

  .my-progress-header{
    display: flex;
    cursor:pointer;
    background: var(--neutral-1);
    margin:0;
    padding:48px;
  }
   .my-progress-header i{
     margin-right: 10px;
     margin-top: 2px;
   }


.container .widget--badges_standard, .container .widget--title_standard, .container .widget--dashboard-stats_standard, .container .widget--dashboard-access_standard{
    background:var(--neutral-1);
    margin:0;
    padding:48px;
}
.dashboard-badges-container{
    background:var(--neutral-1);
}

.container .widget.widget--recommended-content_multi-carousel{
  padding-top:3rem;
  padding-bottom:1rem;
  background:var(--neutral-3);
  margin-left:0;
  margin-right:0;
}
.learn.dashboard .container .buttonrow{
  text-align: center;
  background:var(--neutral-3);
  margin-left:0;
  margin-right:0;
  padding-bottom:2rem;
}
.container .widget.lastrow{
  padding-top:5rem;
}
.container .widget.lastrow-pano{
  background:var(--neutral-3);
  margin-left:0;
  margin-right:0;
  padding-bottom:2rem;
}



/* LEARNING PATHS PAGE */

  .collection__courses .center-ruled-title{display: none;}
  .collection__courses h3{font-size:1.5rem; font-weight: 300;}
  .learning-path-milestone__badge--required{
    background-color: var(--primary-light-2);
    color:var(--primary-dark-3);
    border-radius:4px;
    padding:4px 8px;
    text-transform: none;
    font-weight:700;
    font-size:.8rem;
  }
  .learning-path-detail-milestone-item__asset{border-radius:16px; padding-right:0; width:100%;}
  .learning-path-detail-milestone-item__content-type, .learning-path-detail-milestone-item__description{padding-left:2rem;}
  .enroll--learning-path{padding-bottom:20px;}
  .enroll--learning-path hr{display: none;}
  .enroll__secondary-actions{display: none;}



/* ALL WIDGETS */

  /* widget spacing for non logged in page */
  .layout__content .widget, .home__content .widget{
    margin:0px 60px 70px 60px;
    padding:0;
    width:auto;
  }

  /* hide the divider line */
  .layout__content .widget .hr__accent{display:none;}
  
  /* adjust styling for widget titles */
  .widget__subtitle, .widget__title{text-align: left;}
  h1.widget__title{
    font-size:1.7rem;
    font-weight:700;
    color:var(--neutral-7)
  }
  h2.widget__title, .course__detail__header h1, .course__detail__content h1{
    font-size:3rem;
    font-weight:700;
    color:var(--neutral-7);
    margin-bottom:.5rem;
  }
  .course__detail__content p{
    font-size:1.125rem;
  }



/* HOME ABOUT BOX */

  /* styling for homepage section of content types in hub */
  .home-about{background:var(--neutral-3);border-radius: 2rem;}

  /* sizing of tile images */
  .home-about li.about-block__container .about-block{
    background-position: 50% 2rem;
    background-size: 280px 240px;
  }
  
  /* sizing of text for tiles */
  .home-about li.about-block__container .about-block>span{padding-top:300px;}
  .home-about li.about-block__container .about-block__text h3{
    text-transform: none;
    font-size:1.9rem;
  }
  .home-about li.about-block__container .about-block__text p{font-size:1.1rem}



/* ARTICLE PAGE */ 

  /* Hiding Rating widget and sidebar spacing */
  div.article-sidebar {display: none;}
  /*increase width of Article content to fill sidebar*/
 div .medium-9.article-content {
    width: calc(100% - 50px); 
    margin-left: 25px; 
    margin-right: 25px;}
  div.article-content__info {margin-top: 0;} 



/* COURSE CATALOG */

  /* Fix layout for catalog anchor tag above Content Catalog to reduce space it takes up */
  .widget.widget--one-column.widget--one-column_standard.hide-section,
  .widget.widget--one-column.widget--one-column_standard.hide-section p {padding: 0; margin-bottom:-20px;}

  /* styling for catalog items. */
  .catalog-grid-item{
    border-radius: 16px;
    border:1px solid var(--neutral-4);
    padding:0;
  }
  .catalog-grid-item:focus, 
  .catalog-grid-item:hover{
    border:1px solid var(--neutral-8);
  }
  .catalog-grid-item:active{
    border:1px solid var(--neutral-7);
    background-color:var(--neutral-2);
  }

  /* add radius to image as well */    
  .catalog-grid-item__asset{
    border-radius: 15px 15px 0 0;
  }

  /* adjust spacing to allow for pill placement */
  .catalog-grid-item__body{
    position: relative;
    padding:60px 1rem 2rem 1rem;
  }
  
  /* font sizing for catalog text */
  .catalog-grid-item__title{font-size:1.5rem;}
  .catalog-grid-item__description{font-size:1rem;padding-top:1rem;}

  /* style the pill that identifies the item type */
  .catalog-grid-item__source{
    position: absolute;
    top:1rem;
    background-color: #9A3264;
    color:var(--neutral-1);
    border-radius: 24px;
    padding:8px 16px;
    display: inline-block;
  }
  .catalog-grid-item__source strong{font-weight: 500;}

  /* hide the extra items in the catalog that aren't needed */
  .catalog-grid-item__hr{display: none;}
  .catalog-grid-item__cta-container{display: none;}

  /* styling and positioning of pill to show status of catalog item */
  .catalog-grid-item__completed-container{
      background-color:var(--functional-1-trans); 
      border-radius:15px 15px 0 0;
  }
  .catalog-grid-item__completed i{
    color:var(--functional-1);
    font-size:2rem;
    border:0;
    padding:.4em;
  }
  .catalog-grid-item__completed p{
    background-color:var(--neutral-1);
    color:var(--functional-1);
    padding:3px 8px;
    border-radius:24px;
    font-size:.8rem;
    display:inline-block;
  }

  /* minor styling for the left menu of catalog items */
  .catalog-aggregation{border:0; border-bottom:1px solid var(--neutral-4);padding:.5em;}
  .catalog-aggregation__expander i{color:var(--primary)}
  .catalog-aggregation--expanded{background-color:transparent; margin-bottom: 0;}

  /* New left menu of catalog styling for Custom Fields switch */
.catalog-aggregation__header--label { font-size: 16px;}
.HIDEcatalog-aggregation:nth-last-of-type(2) .catalog-aggregation__header--label {color:var(--secondary-1);}
.catalog-aggregation__expander {line-height:16px;}
.btn.catalog-aggregation__value {line-height:1.75;}


/* RECOMMENDED CONTENT */
.featured-content-multi-carousel{width:100%;}
.featured-content-multi-carousel ul{
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
}
.featured-content-multi-carousel ul li{
  min-width: 200px;
}
.featured-content-multi-carousel ul li a.catalog-item{
  height:100%
}
.featured-content-multi-carousel .featured-content-multi-carousel-item{
  height: 100%;
  border-radius: 20px;
  border:1px solid var(--neutral-4);
  background-color:var(--neutral-1);;
}
.featured-content-multi-carousel .catalog-grid-item__asset-container {position: relative;}

.featured-content-multi-carousel .featured-content-multi-carousel-item img{
  border-radius:20px 20px 0 0;
  padding:0;
}

.featured-content-multi-carousel .featured-content-multi-carousel-item .featured-content-multi-carousel-item__body{
  padding:4em 16px 16px 16px;
  position: relative;
  text-align: left;
}

.featured-content-multi-carousel .featured-content-multi-carousel-item .featured-content-multi-carousel-item__body h4{
  font-size:18px;
  font-weight: 300;
}

  /* style the pill that identifies the item type */
  .featured-content-multi-carousel-item__source{
    position: absolute;
    top:1rem;
    left:10px;
    background-color: #9A3264;
    color:var(--neutral-1);
    border-radius: 24px;
    padding:8px 16px;
    display: inline-block;
  }
  .catalog-grid-item__source strong{font-weight: 500;}
  
  .catalog-grid-item__asset-container{max-height:113px; overflow:hidden;}

  .featured-content-multi-carousel-item__description{
    font-size:14px;
    padding:0;
    margin-top:1em;
  }

/* USER */

  /* !! There a rule that is overriding this on 768 and smaller, that I can't figure out. Seems like a bug of some sort, since rule is just around line 1117 */
  .home__content .layout__content--strategy-guides .strategy-guides-title.widget {
    padding-left: 0!important;
    margin-bottom: 25px!important;
  }

  /* USER DOCS LANDING PAGE */
  /* "back to" for my custom pages*/
  .custom-back-nav {
    margin-left: -20px;
    color: #969797;
    margin-bottom: 25px;
    display: block;
  }

  .home__content .layout__content .help-center-landing {
    background-color: var(--neutral-2);
    padding: 40px 40px 0 40px;
    border-radius: 30px;
    margin-top: 6em;
  }
  .help-center-landing .featured-content-block-grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
   }
  .help-center-landing .catalog-grid-item{
    border: 0;  
  }
  .help-center-landing .catalog-grid-item .catalog-grid-item__title{
    font-family:"museo-sans";
    font-weight: 700;
    text-align: center;
    margin-top: 14px;
    margin-bottom:8px;
  }
  .help-center-landing .catalog-grid-item .catalog-grid-item__description{
    font-family:"museo-sans";
    font-weight:300;
    text-align: center;
  }
  .help-center-landing .catalog-grid-item img{
    border-radius: 24px;
  }  

  .help-center-landing .medium-6 {width: 100%;}
  .help-center-landing .catalog-grid-item__source {display: none;}
  .help-center-landing .catalog-grid-item__body {padding-top: 10px;}
  .help-center-landing .catalog-grid-item__description {padding-top:0;}
  .help-center-landing .catalog-grid-item__asset-container--split {padding: 0;}
  .help-center-landing .catalog-grid-item__asset {border-radius: 15px 15px 0 0;}

.help-center-landing .catalog-grid-item__asset-container {  
  overflow: visible;
  max-height: none;}

  .help-center-nav{
    display: flex;
    list-style-type: none;
    justify-content: center;
    flex-wrap:wrap;
    gap:34px;
    margin:0;
  }
  .help-center-nav li{
    text-align: center;
    padding: 16px;
    border-radius: 16px;
    font-family:"museo-sans";
    font-weight:500;
    font-size:1rem
  }
  .help-center-nav li:hover a{
    color:#000;
  }
  .help-center-nav li.active{
    background-color: var(--neutral-2);
    border:2px solid #FF783F;
  }
  .help-center-nav li:hover{
    background-color: var(--neutral-3);
  }
  .help-center-nav li img{
    width: 115px;
    display: block;
    margin: 0 auto 24px auto;
  }

  .home__content .layout__content .subpage-header{
    background-color: var(--neutral-2);
    margin: 0 -1rem 48px -1rem;
    min-width: calc(100% + 2rem);
    padding:20px calc(60px + 1rem);
    position: relative;
  }
  .home__content .layout__content .subpage-header.simple {
    margin: 20px 60px;
    padding: 20px;
    background: #fff;
    min-width:auto;
  }
  .home__content .subpage-header .row{
    display:flex;
    align-items: center;
  }
  .subpage-header h3{
    font-family:"museo-sans";
    font-weight:700;
    font-size:2rem;
    margin-bottom:.25em;  
  }
    .subpage-header p{
    font-family:"museo-sans";
    font-weight:300;
    font-size:1.5rem;  
  }

  .subpage-header figure{text-align:center; margin:1em 0}
  .subpage-header img{width:220px;}

  .strategy-guides-about .about-blocks-widget{
        background-color: var(--neutral-2);
        padding:32px;
    border-radius:32px;
  }


/* RELEASE NOTES Landing page */
.home__content .release-notes {
    padding: 0 32px;
    margin: 0 0 48px 0;
}
.release-notes > .ember-view {
    background: var(--neutral-3);
    padding: 32px;
    border-radius: 32px;
}
.release-notes > .ember-view .medium-6 {
    background: var(--neutral-1);
    border-radius: 16px;
    padding: 24px;
    margin-left: 16px;
    width: calc(50% - 16px);
}
.release-notes > .ember-view .medium-6 p {
    margin:0 0 .25rem 0;
}
.release-notes > .ember-view .medium-6 p a {
    text-decoration: underline;
}
.release-notes > .ember-view .medium-6 ~ .medium-6 {
    background: inherit;
    padding-top: 0
}



/* STRATEGY GUIDE Landing page */

  .strategy-guides-title.widget {margin-bottom: 20px;}
  .strategy-guides-title h1.widget__title {
    font-size: 3rem;
    margin-bottom: .25em;
  }
  .home__content .widget.strategy-guides-one-column {margin-bottom: 10px}
  .strategy-guides-one-column h2.widget__title {font-size: 2rem;}



/* ABOUT WIDGET: Strategy Guide Landing page */

  .strategy-guides-about li.about-block__container .about-block:before {padding-top: 0;}

  .strategy-guides-about .ember-view.about-blocks-widget ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .strategy-guides-about [class*=block-grid-]>li {
    display: inherit;
    float: none;
    height: auto;
    padding: 0 .625rem 1.25rem
  }
  .strategy-guides-about .ember-view.about-blocks-widget ul li {
    width: calc(25% - 20px);
    margin-right: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  .strategy-guides-about .ember-view.about-blocks-widget ul li:hover,
  .strategy-guides-about .ember-view.about-blocks-widget ul li:focus {
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .15);
    transition: box-shadow .2s ease;
  }
  .strategy-guides-about .ember-view.about-blocks-widget ul li a:hover,
  .strategy-guides-about .ember-view.about-blocks-widget ul li a:focus {
    color: inherit;
  }

  .strategy-guides-about .about-block__container {
    background-color: #fff;
    border-radius: 20px;
  }
  .strategy-guides-about li.about-block__container .about-block img {
    width: 75px;
  }

  /* Sizing of text for tiles on Strategy Guide Landing page */
  .strategy-guides-about li.about-block__container .about-block__text h3 {
    text-transform: none;
    font-size:1rem;
    font-weight: 400;
  }
    
  /* Adjustment for Feature Guides */
  .feature-guides-about li.about-block__container .about-block__text h3 {
    font-weight: bold;
    font-size: 1.1rem
  }
  .feature-guides-about li.about-block__container .about-block__text p {font-size:.9rem; text-align:left;}
    

  /* Catalog on Strategy Guide Landing page */
  .catalog-no-image .catalog-grid-item__asset-container {display: none;}



/* EXPLAINER landing page */

  .explainer-about .featured-content-article-item__title { font-size: 1.2rem;margin-top: 0;}
  .explainer-about .featured-content-article-item__description { font-size: .9rem;}
.docs-content-tiles{
  display:grid; 
  grid-template-columns: 1fr 1fr;
  flex-wrap: wrap;
  gap:32px;
  list-style-type: none;
  background-color: var(--neutral-2);
  padding:32px;
  border-radius: 32px;;
}
.docs-content-tiles li{
  background-color: var(--neutral-1);
  padding:24px;
  border-radius:16px;
  text-align: center;
}
.docs-content-tiles.tasks a:link, 
.docs-content-tiles.tasks a:visited {
  color: var(--primary);
}

.docs-content-tiles li div{text-align:left;}
.docs-content-tiles li img{
  width:200px; 
  float:left;
  margin-right:24px;
  margin-bottom:24px;
}
.docs-content-tiles li h3{
  font-size:1.5em;
    font-family:"museo-sans";
    font-weight:500;
    margin-bottom:24px;
    color: var(--text-dark);
}
.docs-content-tiles li p{
  color: var(--text-dark);
  overflow: hidden;;
}
.docs-content-tiles.tasks li p {
  margin-bottom: .5rem;
}

/* REFERENCE guide pages */
  .side-nav {
    margin-left: -300px;
    width: 250px;
    padding-left: 15px;
  }
  .nav-start {
    position: absolute;
    top: 0;
  }
  .sticky-nav {
   position: fixed;
   top: 10px;
   height: 98vh;
   overflow-y: scroll;
  }
  .side-nav p {
    margin-bottom: 0;
  }
  .side-nav ul {
    padding-left: 0;
    font-size: .9rem;
    margin-bottom: 0;
    margin-left: 1rem;
    list-style: none;
  }
  .side-nav ul li {
    margin-bottom:0;
    line-height: 1.5;
  }

  .TopBlock {
    margin: 25px 0;
    border-bottom: 1px solid #ccc;
    text-align: right;
  }

  /*Screenshot rule we can apply everywhere, if we add this class. But for now starting in Ref guides*/
  .image-screenshot {
    border:1px solid var(--neutral-4);
    box-shadow: 1px 1px 8px 1px var(--neutral-4);
  }



/* REFERENCE LANDING page */

  .reference-overlay .featured-content-image-overlay-item__title {font-size: 1.1rem; font-weight: bold;}

  .reference-overlay .featured-content-image-overlay-item__description {
    font-size: .9rem;
    line-height: 1.15;
  }

  /* Reset H-tags on article page */
  body.article h1 {
  font-size: 2.5rem;
  line-height: 1.25;
  }
  body.article h2,
  body.article h3,
  body.article h4 {
    margin-top: 2rem;
    margin-bottom: .75rem;
  }
  body.article h2 {font-size: 2rem;}
  body.article h3 {font-size: 1.5rem}
  body.article h4 {font-size: 1.25rem}
  body.article h5 {font-size: 1rem}
  body.article h6 {font-size: .75rem}
  body.article .article-header__typeHIDE {
    font-size: 1.125rem;
    font-style: italic;
    text-transform: uppercase;
  }



/* ******* Snippet & Central Asset Manager CSS Code  ******* */
/* KEY MODULES: Capabilities */

  .capabilities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
    text-align: center;
  }

  .capabilities img {
    width: 40px;
    display: inline;
    vertical-align: baseline;
  }

  .capabilities p {margin: 0;}

  /*Override for h4 rule*/
  body.article .capabilities h4 {
    font-weight: 100;
    font-size: 16px;
    padding-bottom: 10px;
    margin: 0 20px 10px 20px;
    line-height: 1.2;
    border-bottom: #8cb92d 2px solid;
  }

  .capabilities ul {
    list-style-type: disc !important;
    text-align: left;
    font-size: 14px;
    padding-left: 10px;
    line-height: 1.25;
  }

  .capabilities ul li {
    margin: 0;
    margin-bottom: 8px;
  }

  /*Simple box to highlight info*/
  .highlight-box {
    font-size: .875rem;
    background:var(--neutral-3);
    border-left: 6px solid var(--secondary-2);
    border-radius: 5px;
    margin: 15px 0;
    padding: 10px;
  }
  .highlight-box p:last-of-type {margin-bottom: 0;}

  /* DevDocs styling for Highlight box*/
  .highlight-box.devdocs {
	border: var( --primary-dark-1) 3px solid;
    display: flex;
	background: var(--neutral-1);
	border-radius: 3px;
	padding: 0;
	margin: 20px 0;
}
.highlight-box.devdocs .highlight-left {
	background: var(--neutral-3);
	flex: 0 0 120px;
    margin-right: 20px;
}
.highlight-box.devdocs .highlight-left img {
    margin: 20px auto;
	width: 100px;
	display: block;
}

.highlight-box.devdocs .highlight-right h3 {
	color: var( --primary-dark-2);
	margin: 20px;
}
.highlight-box.devdocs .highlight-right {
	padding-bottom: 20px;
	padding-right: 20px;
}
.highlight-box.devdocs .highlight-right > p,
.highlight-box.devdocs .highlight-right h4 {
	margin-left: 20px;
}
.highlight-box.devdocs code {
	font-size: 14px;
}
.highlight-box.devdocs a code {
    background-color: transparent;
    color: var(--primary);
}
/* Added for Release Notes; can be used by User Docs too. */
code {
  font-family: Consolas, Menlo, Monaco, monospace;
  background: #efefef;
  font-size:.9rem;
  border-radius:3px;
}

.codeSnippet {
    font-family: Consolas, Menlo, Monaco, monospace;
    font-size: 14px;
    color: #fff;
    background-color: #010422;
    border: solid 1px #000;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 1em;
    overflow:auto;
   display:inline-block;
}
.codeSnippet p {margin: 0 25px; line-height:1.5em;}
.codeSnippet strong {background-color:#fffff0;color:#010422;}


  /* Call out box: icon on top in color bar */
  .callout-box {
    background: #fff;
    border-radius: 16px;
    padding: 0;
    margin: 40px 0;
    border: 3px solid var(--secondary-2);
  }
  .callout-box.at-a-glance {
    border: 3px solid var(--functional-2); 
    margin: 30px 0;
  }

  .callout-title {
    display: flex;
    align-items: center;
    background: var(--secondary-2);
    border-radius: 12px 12px 0 0;
  }
  .callout-box.at-a-glance .callout-title {
    background: var(--functional-2);
  }

  .callout-title p {margin-bottom: 0;}

  .callout-title img {
    margin: 20px;
    width: 50px;
    display: block;
  }

  .callout-box.at-a-glance .callout-title img {
    width: auto;
    height: 50px;
    margin: 10px 20px;
  }

  .callout-box .callout-title h4 {
    color: #fff;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
  }

  .callout-body {padding: 32px;}
  .callout-box.callout-body h5{margin-bottom: 24px;}
  .callout-box code {font-size: 14px;}

  /* Used in callout box for "Key Takeaway" */
  .guide-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .guide-grid > div {
    width: calc(50% - 20px);
    flex: 0 1 auto;
    margin: 10px 0;
  }
  .guide-grid h5 {
    margin:0 0 20px 0;
    padding: 0;
  }
  .guide-grid h5 {
    margin-top: 0;
    padding-top: 0;
  }
  .guide-grid h5 img {
    float: left;
    padding-right: 8px;
    height: 18px;
  }
  .guide-grid p {margin: 0 10px 10px 0; font-size: 1rem;}
  .guide-grid p.guide-link{text-align: right;}

  /* Base styles for all messages */
  .message-box {
    --border-color: #000;
    --bg-color: #fff;
    /*Keep icons to about 30 wide, or 30 tall depending on orientation of icon*/
    --icon-width: 30px;
    --icon-height: 30px;
    --icon-plus-padding: calc(var(--icon-width) + 10px); 
    /* --- */
    border-radius: 16px;
    padding: 25px;
    margin: 40px 0;
    border: 3px solid var(--border-color); 
    background-color: var(--bg-color);
  }

  /*Body style to override H-tag rules*/
  body .message-box h4 { 
    position: relative;
    margin:0 0 25px 0;
    padding: 0 20px;
    margin-left: var(--icon-plus-padding);
    line-height: var(--icon-height);
    font-weight: 400;
  }
  .message-box h4:before {
    position: absolute;
    content:''; 
    left: calc(var(--icon-width) * -1);
    background-size: var(--icon-width) var(--icon-height);
    width: var(--icon-width);
    height: var(--icon-height); 
  }
  .message-box p {margin-left: 15px;}

  .take-note {
    --border-color: var(--secondary-2);
    --bg-color: #f8fdff;
    --icon-width: 30px;
    --icon-height: 37px;
  }
  .take-note h4:before {
    background-image: url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/feed80a3-ef60-4f2c-ae01-f36357d85d2b/8njpthjcpt9g-mc_icon_Design-Thinking-2_orng.png");
  }

  .warning { 
    --border-color: var(--functional-2);
    --bg-color: #fff9f6;
    --icon-width: 53px;
    --icon-height: 30px;
  }

  .warning h4:before {
    background-image: url("https://d36ai2hkxl16us.cloudfront.net/course-uploads/feed80a3-ef60-4f2c-ae01-f36357d85d2b/82w72j9hij5b-mc_icon_Announcement_orng.png");
  }

/* JOURNEY VIEW - Dev Docs */
.journey-visual {
	margin: 20px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}
.journey-visual div {
	border-radius:50%;
	padding: 15px;
	margin: 0 35px 35px 0;
	flex: 0 0 auto;
	height: 160px;
	width: 160px;
	position: relative;
	display: flex;
	align-items: center;
}
.journey-visual p {
	margin: 0;
	font-size: 13px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', Geneva, Verdana, sans-serif;
	text-align: center;
	line-height: 1.1;
	color: #fff;
	font-weight: 400;
}
.journey-visual div:after {
	position: absolute;
	width: 25px;
	height: 25px;
	content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItYXJyb3ctcmlnaHQiPjxsaW5lIHgxPSI1IiB5MT0iMTIiIHgyPSIxOSIgeTI9IjEyIj48L2xpbmU+PHBvbHlsaW5lIHBvaW50cz0iMTIgNSAxOSAxMiAxMiAxOSI+PC9wb2x5bGluZT48L3N2Zz4=);
  background-repeat: no-repeat;
	left: 165px;
	top: 50%;
	margin-top: -12px;
}
.journey-visual div:last-of-type:after {display: none;}

.journey-visual div:nth-child(1) {
	background: #f47339;
}
.journey-visual div:nth-child(2) {
	background: #628020;
}
.journey-visual div:nth-child(3) {
	background: #d7363c;
}
.journey-visual div:nth-child(4) {
	background: #25826d;
}
.journey-visual div:nth-child(5) {
	background: #f28b00;
}
.journey-visual div:nth-child(6) {
	background: #Cf4401;
}
.journey-visual div:nth-child(7) {
	background: #628020;	
}
.journey-visual div:nth-child(8) {
	background: #d7363c;;
}
.journey-visual div:nth-child(9) {
	background: #f47339;
}
.journey-visual div:nth-child(10) {
	background: #25826d;
}
.journey-visual div:nth-child(11) {
	background: #d7363c;
}
.journey-visual div:nth-child(12) {
	background: #628020;
}

/* MODULES - CONFIGURATION - Dev docs */
.module-box-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
	grid-gap: 20px;
	margin-bottom: 40px;
}
.module-box {
	background: #F5F5F6;
	border-radius: 8px;
	padding: 15px;
}
.module-box h4 {
	margin-top: 0!important;
}
/*to override WYSIWYG bug*/
.module-box h4 p {display: inline;margin-left: 0;}

.module-box img {
	vertical-align: text-bottom;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.module-box p {	margin-left: 30px;}
.module-box ul {padding-left:0;}
.module-box ul p {margin-left: 0;}

.module-box p:last-of-type {
	margin-bottom: 0;
}

/* TASK LIST - Dev docs */
.task-list {
	font-size: 18px;
	font-family: museo-sans, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 25px;
}
.task-list p {
	font-size: 16px;
  font-family: "proxima-nova";
	margin-top: 0;
}

.task-list ol {
	list-style: none;
	counter-reset: task-counter;
	padding-left: 60px;
}
.task-list ol li {
	margin: 0 0 35px 0;
	padding-left: 20px;
	counter-increment: task-counter;
	position: relative;
}

.task-list ol li:before {
	content: counter(task-counter);
	color: #727271;
	width: 60px;
	height: 60px;
	text-align: center;
	font-size: 32px;
	font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height: 60px;
	font-weight: 100;
	position: absolute;
	left: -60px;
	top: -5px;
	background: #F5F5F6;
	border-radius: 50%;
}



/* FOOTER */

  /* adjust styling for footor color and borders */
  .footer{
    background-color:var(--neutral-3);
    border-top:1px solid var(--neutral-4);
    padding:64px;
  }

  /* remove extra top border on footer */
  .footer__inner{border:0;}

  /* hide extra line of copyright text that is generated by system */
  .footer__company__info{display: none;}

  /* create the four column layout for the footer */
  .footer-columns{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  /* new styling for footer headings */
  .footer-columns h4{
    font-size: 1.2em;
    color:var(--text-light);
    margin-bottom:24px;
  }

  /* adjust styling for lists in footer */
  .footer-columns ul{margin:0;}
  .footer-columns li{
    list-style-type: none;
    color:var(--text-dark);
    padding-bottom:1em;
  }

  /* adjust max width for logo in footer */
  .footer-columns img{max-width:145px;}

  /* font styling for copyright statement */
  .footer-legal{
    margin-top:30px;
    font-size:.8em;
    color:var(--text-dark);
    text-transform:none;
  }



/* COURSE PAGE */


  /*hide purchasing widget */
  .widget--course-purchase .btn--secondary{display:none;}

  /* clear float to avoid layout issue with left nav */
  .learner__container{clear:both;}
  .course__container .header .company__beta-logo .company-logo__container{margin-top:0}
  /* small change for left nav panel of course */
  .layout-panel{background-color:transparent;padding-left:0;}

  /* allow sidebar to grow to full height of page */
  .learner__sidebar-list{max-height:none;overflow-y:auto;}

  /* increase spacing above the syllabus list */
  .learner__sidebar__expandables{margin-top:.5rem;}

  /* styling for section heading in the syllabus sidebar */
  .expandable-sidebar__toggle{
    background-color: transparent;
    color:var(--text);
    font-size:1.1rem;
    font-family:"museo-sans";
    text-transform: none;;
  }
  .expandable-sidebar__toggle i.expandable-sidebar__icon--left{color:var(--primary);}

  /* adjust padding for nav container and lists inside of it */
  .learner__container--toggled .learner__sidebar{padding:2rem 0 2rem 2rem;}
  .learner__sidebar-inner-list{padding-left:2rem;}

  /* adjust margin to pull numbers out so text is algned */
  .syllabus__section-title-index{margin-left:-1.7rem;}

  /* remove the lines between list items in nav */
  .learner__sidebar-list>li{border-bottom:0;}

  /* adjust padding for items in list */
  .learner__sidebar-list ul.syllabus__section-list .syllabus__lesson-container{padding-left:0;}
  ul.syllabus__topics{padding:0;}
  .syllabus__topic--non-expandable-title-text{padding-left:0;}

  /* font styling for item on syllabus list */
  .learner__sidebar-inner-list .syllabus__lesson .syllabus__lesson--title{
    font-size:.9rem;
    font-weight:500;
  }
  .learner__sidebar-inner-list span.syllabus__section-title{
    text-transform: none;
    font-weight:500;
    font-size:1rem;
  }

  /* adjust styling for the currently active item */
  .syllabus__topic.syllabus__topic--active{background-color:transparent;}
  .lesson-progress-page.lesson-progress-page--current .icon-circle.icon-circle{
    border-color:var(--functional-2);
  }
  .lesson-progress-page.lesson-progress-page--current .icon-circle.icon-circle span{      background-color:var(--functional-2);
  }

  /* adjust margin for the expander triangles of the syllabus */
  button.syllabus__lesson--expander .expander-triangle__closed-right{margin:0;}
  button.syllabus__lesson--expander .expander-triangle__closed-down{margin-left:0;}

  /* hide extra icon for some items in list */
  li.syllabus__topic--non-expandable:before{display: none;;}

  .expandable-sidebar__buttons a{padding:0 10px;}

  /* styling for the hide menu button */
  .learner__container__toggle .btn{line-height:2; left:1rem;}
  .learner__container__toggle .hide-sidebar,
  .learner__container__toggle .hide-sidebar:focus,
  .learner__container__toggle .hide-sidebar:active,
  .learner__container__toggle .hide-sidebar:hover{
    background-color: transparent;
    color:var(--text);
    border:0;
    padding:0;
    text-align: left;
    font-size:.9rem;
  }
  .learner__container__toggle .hide-sidebar i.icon-delete{
      font-size:1.3rem;
      padding-right:0; 
      padding-top:3px;
  }

  /* styling for the search bar in the syllabus */
  .learner__sidebar__search-icon{top:44px;left:3px;}
  .learner__sidebar__search{padding-top:50px;}
  .learner__sidebar__search .small-4{position:absolute;top:0;left:0}
  .learner__sidebar__search .small-8{width:100%;}
  .learner__sidebar__search input{
    padding:16px 16px 16px 25px;
    border:1px solid var(--neutral-5);
    background-color:var(--neutral-1);
    box-shadow: none;
  }
  
  /* styling for course progress bar at top of every course */
  .section-progress-bar div{background-color:var(--primary-light-3)}
  .section-progress-bar span{background-color:var(--primary); height:8px;}

  /* styling for forward and back buttons to navigation in course */
  .directional__nav__button{
    background-color:var(--neutral-1);
    border:1px solid var(--primary);
    color:var(--primary);
  }
  .disabled .directional__nav__button{
    background-color:var(--neutral-3);
    border:1px solid var(--neutral-5);
    color:var(--neutral-5);
  }

  .topic__text__caption{border:0;}
  .topic__text__caption ol, .topic__text__caption p, .topic__text__caption ul{font-size:1rem;}



/* COURSE CONTENT TYPES */

  /* video player */
  .topic__contained__container.topic__contained__container--video .topic__contained__content, 
  .topic__contained__container .topic__contained__wrapper .topic__contained__sidebar
  {border:0;}

  /* expandable topic list content type*/
  .topic__list__item{border-color:var(--neutral-5); border-radius:8px;}
  .topic__list__item.topic__list__item--expanded{border-color:var(--neutral-5);}

  /* flip card content */
  .flip-card{border:1px solid var(--neutral-5); border-radius:8px;}
  .flip-card__front{background-color:transparent; border-radius:8px;}
  .flip-card__front{background-color:transparent; border-radius:8px;}
  .flip-card__front .front__content{height:100%;max-height:1000px!important;border-radius:7px;}
  .flip-card__front .front__content .editor-content{padding:0;position:relative;height:100%}
  .flip-card__front .front__content .editor-content p{
    padding: 0;
    margin: 0;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 20px;
  }
  .flip-card__front .front__content .editor-content p img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    object-fit: cover;
    z-index: 1;
    border-radius:7px;
  }
  .flip-card__back .back__content .editor-content p{font-size:.9rem;}
  .flip-card__front .front__content .editor-content p:first-of-type,
  .flip-card__front .front__content .resource__title{
    position: absolute;
    bottom: 0px;
    left: 0px;
    background-color: #fff;
    z-index: 2;
    width: 100%;
    padding: 15px 45px 15px 15px;
    margin: 0;
    height:auto;
    top:auto;
    border-radius:0 0 7px 7px;
    color:var(--text);
  }
  button.flip-card__icon{
    color:var(--primary);
    border:1px solid var(--primary);
    bottom:20px;
    right:20px;
    border-radius: 2px;
  }
  button.flip-card__icon i{line-height:1.2; vertical-align: top;}
  .flip-card.flipped{overflow-y:auto;}

  /* slide show content type */
  .audio-player__bar .btn.audio-player__play-button{background-color: var(--primary);border:1px solid var(--primary)}
  .audio-player__bar .audio-player__controls .audio-player__progress-indicator{background-color: var(--primary-light-2);height:3px;}
  .audio-player__bar .audio-player__controls .presentation__controls__loader{background-color:var(--primary)}
  .slide-show__top-bar{background-color:var(--primary-light-4); color:var(--text);
  }
  .slide-show__controls .slide-show__button{background-color:transparent; color:var(--primary);border:0}
  .slide-show__controls .slide-show__button:hover, .slide-show__controls 
  .slide-show__button:focus, .slide-show__controls .slide-show__button:active{background-color:transparent; color:var(--primary);border:0;} 

  /* slideshow counter list */
  .topic__index .topic__index__number span{border-color: var(--neutral-4);border-width: 8px;}
  .topic__index .topic__index__number.topic__index__number--active span{border-color: var(--primary);}

  /* quiz cotent type */
  .quiz-start__text p.quiz-start__main-title{
    width:240px;
    height:240px;
    background-image:url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/g96hzc18kfwi-quizimage.png");
    background-size:240px 240px;
    background-repeat: no-repeat;
    margin:0 auto;
    text-indent:-10000px;
  }
  .quiz-start__text .btn{padding:0 1em}
  .results__question-chart__container{display: none;}
  .results__question-chart-timer, .results__question-pool{height:auto;}

  /* image hot spot */
  .topic__image .image-tag__popup .popup__caption p{font-size:1rem;}
  .image-tag__popup{padding-right:30px;}
  .image-tag__popup .btn--icon{
    right:0;
    left:auto;
  }
  .btn--close{
    background-color: #fff;
    color:#000;
  }
  .btn--close:hover, .btn--close:focus{
    background-color: #fff;
    color:#000;
  }

  /* drag and drop items */
  .draggable-item[draggable=true] .btn--draggable{
    border:2px dashed var(--primary); 
    background-color:var(--neutral-1); 
    border-radius:8px;
    font-size:1rem; 
    line-height:1.3;
    padding:1rem 1rem 1rem 55px;
    background-image: url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/dndu4w8e9fok-icon.png");
    background-repeat: no-repeat;
    background-position: 15px center;
    text-align:left;
  }
  .card__label__button.active, .card__label__button:hover{
    background-color:var(--primary-light-4); 
    color:var(--text);
    border:2px dashed var(--primary); 
    border-radius:8px;
    font-size:1rem; 
    line-height:1.3;
    padding:1rem 1rem 1rem 55px;
    background-image: url("https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/2ab4daf5-6a0b-4dc6-b53f-923bff523901/dndu4w8e9fok-icon.png");
    background-repeat: no-repeat;
    background-position: 15px center;
    text-align:left;
  }
  .card__label__button.card__label__button--correct{
    border:2px dashed var(--functional-1); 
    color:var(--functional-1); 
    border-radius:8px;
    font-size:1rem; 
    line-height:1.3;
    padding:1rem;
    text-align: left;
  }
  .draggable-item[draggable=true] .btn--draggable:hover,
  .draggable-item[draggable=true] .btn--draggable:focus{
    background-color:var(--primary-light-4); 
    color:var(--text);
  }
  .draggable-item[draggable=true] .btn--draggable:active{
    background-color:var(--primary-light-3); 
    color:var(--text);
  }

  /* matched pair items */
  .match-pair__card{border-radius:8px; border:1px solid var(--neutral-5); padding:20px 20px 60px 20px;}
  .match-pair__card .match-pair__card-button{padding:0}
  .match-pair__card-clue{
    background-color: var(--primary-light-4);
    border-radius:8px;  
    padding:20px;
    border:1px solid var(--primary-light-2)
  }
  .match-pair__card-clue picture img{display: none;}
  .match-pair__card-clue .resource__title{
    background-color: transparent;
    color:var(--text);
    font-size:.9rem;
    bottom:0;
    left:0;
    text-align:center;
    font-weight:600;
  }
  .match-pair__list .match-pair__card--incorrect .match-pair__card__message{
    background-color:var(--primary-light-4); 
    color:var(--text);
    border:2px solid var(--primary-light-2); 
    border-radius:8px;
    top:20px; bottom:40px; right:20px; left:20px;
  }
  .match-pair__card__over{
    background-color:var(--primary-light-3); 
    color:var(--text);
    border:2px solid var(--primary-light-2); 
    border-radius:8px;
    top:20px; bottom:40px; right:20px; left:20px;
  }
  .match-pair__instruction-container .match-pair__instruction-container__message{color:var(--text-light);}
  .match-pair__card__over .match-pair__card__over__inner{margin:20px auto}
  .match-pair__list .match-pair__card--incorrect .match-pair__card__message .match-pair__card__message__inner{margin-top:1.3rem;}
  .match-pair__list .match-pair__card--incorrect .match-pair__card__message .match-pair__card__message__inner p{text-transform:none; font-size:.9rem;}
  .match-pair__card__over .match-pair__card__over__inner .match-pair__icon{color:var(--primary);font-size:1.5rem;}
  .match-pair__list .match-pair__card--incorrect .match-pair__card__message .match-pair__icon{display: none;}
  .match-pair__list .match-pair__card--correct{border:2px solid var(--functional-1);}
  .match-pair__list .match-pair__card--correct .match-pair__card-answer h5{color:var(--functional-1); text-transform:none;font-size:1.2rem;}
  .match-pair__list .match-pair__card--correct .match-pair__card-answer{
    left:0; top:0;
    overflow-y:auto; 
    padding:1rem 1rem 0 1rem;
  }
  .match-pair__list .match-pair__card--correct .match-pair__card-answer p span{color:var(--text)!important;}



/* GENERAL TAGS */

  /* resize the default heading sizes */
  h1{font-weight:700;}
  h3{font-weight:700;}
  /* Targeting title on Courses and MicroCourses */
  .learner-section__title__container h3{
    font-size:1.8em; 
    font-weight:700;
  }

  /* override default button styles for primary and secondary type buttons */
  .btn{
    font-size:.9rem;
    padding: 0 20px;
    border-radius:2px;
    line-height: 3;
  }
  .btn--link{line-height:100%}
  a.btn--link{color:var(--primary)}
  /*a.btn--link i{display: none;}*/
  a.btn div{line-height:3;}
  a.text-white:focus, a.text-white:active{
    color:var(--neutral-1);
  }
  .btn--primary, .btn-primary, .btn--alt.btn--primary{
    background-color:var(--primary);
    border-color:var(--primary);
    white-space: nowrap;
    color:var(--neutral-1);
  }
  .btn--primary:hover, .btn-primary:hover,
  .btn--primary:focus, .btn-primary:focus,
  .btn--alt.btn--primary:focus, .btn--alt.btn--primary:hover{
    background-color:var(--primary-dark-1);
    border-color:var(--primary-dark-1);
    color:var(--neutral-1);
  }
  .btn--primary:active, .btn-primary:active, .btn--alt.btn--primary:active{
    background-color:var(--primary-dark-2);
    border-color:var(--primary-dark-2);
    color:var(--neutral-1);
  }
  .btn--secondary, .btn-secondary, .btn--alty, .btn-alt{
    border:1px solid var(--primary);
    background:var(--neutral-1);
    color:var(--primary);
    line-height: 3;
  }
  .btn--secondary:hover, .btn-secondary:hover,
  .btn--secondary:focus, .btn-secondary:focus
  .btn--alt:hover, .btn-alt:hover,
  .btn--alt:focus, .btn-alt:focus{
    border:1px solid var(--primary-dark-1);
    background-color:var(--primary-light-4);
    color:var(--primary);
  }
  .btn--secondary:active, .btn-secondary:active,
  .btn--alt:active, .btn-alt:active{
    border:1px solid var(--primary-dark-2);
    background-color:var(--primary-light-3);
    color:var(--primary);
  }

  /* hide the social icons we don't want */
  .btn--facebook, .btn--pinterest{display: none;}

  /* adding in a standard style to use for floated images in user docs */
  .float-right-image {
    float: right;
    margin-left: 10px;
    max-width: 100%;
  }

  /* style for enlarged text */
  .text-large{
    font-size:1.2em;
  }

  /* coloring for all input fields */
  input [type=text], [type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea {
    background-color:var(--neutral-2); 
    border-color:var(--neutral-5);
    border-radius:2px;
    box-shadow: none;
  }

  .redactor-box.redactor-styles-on{margin-bottom:1rem;}
  form.form .bookmark-body select.form-control{margin-bottom:1rem;}
  .email-capture input[type=email]{margin-bottom:1rem;}
  .widget--course-purchase_standard,
  .course__detail__social,
  .widget--course-benefits_standard,
  .widget--learning-path-purchase_standard{
    background-color: var(--neutral-1);
    border:1px solid var(--neutral-4);
    border-radius:24px;
  }
  .widget--course-benefits_standard hr{display: none;}
  .widget--course-purchase_standard .panel{background-color: transparent;}
  .course__detail__enrolled{border:0;}
  .home__content .widget:first-of-type{margin:20px 60px 10px 60px; padding:20px  20px 0 20px;}
  .home__content .widget:first-of-type .panel{padding:0;}



/* TEAM PORTALS */

  /* adjust heading sizes and spacing for team portals */
  body.article div.team-portal h1{font-size: 32px;}
  body.article div.team-portal h1 span{font-weight: 300;}
  body.article div.team-portal h2{font-size: 28px; text-align: center;}
  body.article div.team-portal h3{
    font-size: 18px;
    margin-top:0;
    font-weight:500;
  }

  /* put each section in a grey box */
  body.article div.team-portal div.row{
    background-color: var(--neutral-2);
    border-radius: 32px;
    padding:32px;
  }

  /* adjust padding for first and last column to fix visual space */
  body.article div.team-portal div.row div.columns:first-child{padding-left:0;}
  body.article div.team-portal div.row div.columns:last-child{padding-right:0;}

  /* for team content section make it full width */
  body.article div.team-content{
    background-color: var(--neutral-2);
    margin:4rem -4rem;
    padding:32px;
    max-width: none;
    box-sizing: content-box;
    width:calc(100% + 4rem);
    position: relative;
  }

  /* move team link button to top right of box and adjust style */
  body.article div.team-content .btn{
    position: absolute;
    top:32px;
    right:64px;
    border:1px solid var(--primary);
    background:var(--neutral-1);
    color:var(--primary);
    line-height: 3;
  }

  /* adjust hero section of team page to remove color and fix text and image sizes and location */
  body.article div.portal-heading div.row{
    background-color:transparent;
    border-radius:0;
    padding:0;
  }
  body.article div.portal-heading span.h4{
    font-size:24px;
    font-weight:300;
  }
  body.article div.portal-heading img{max-width:300px;}
  body.article div.portal-heading div.row div.columns:last-child{text-align: center;}



/* SCREEN SIZE ADJUSTMENTS */
  

@media only screen and (max-width: 1440px) {

  /* adjust hero text a bit for normal size screens */
  .hero .hero__caption{top:0; width:60vw;}
  .hero .hero__caption .hero__title{font-size:2.5vw;}
  .hero .hero__caption span{font-size:1.1rem;}

  /* adjust size and spacing of about section on non logged-in page */
  .home-about li.about-block__container .about-block{background-size: 20vw 18vw;}
  .home-about li.about-block__container .about-block>span{padding-top:23vw;}
  .home-about li.about-block__container .about-block__text h3{font-size:2.5vw;}

}
@media only screen and (max-width: 1150px) {
  .docs-content-tiles li img{float:none; margin-right:0;}
}

@media only screen and (max-width: 1024px) {

  /* for images that are floated in courses remove float at this size */
  .float-right-image {
      float: none;
      display: block;
      margin: 0 auto 10px auto;
  }

  /* Ported User Docs pages/rules */
  .strategy-guides-about .ember-view.about-blocks-widget ul li {width: calc(50% - 20px);}
  .side-nav {margin-left: -200px;}

  .help-center-nav{gap:24px;}
  .help-center-nav li{padding: 16px;font-size:.9rem}
}


@media only screen and (max-width: 1000px) {

  /* made navigation sidebar and content full width at this size */
  .learner__container--toggled .learner__sidebar{width:100%; padding:1rem 5rem;}
  .learner__content{width:100%;padding:1rem 5rem;}

  /* reduce side of learning path box on dashbaord and adjust container */
  .lp-path{width:330px;}
  .lp-panels{max-width:768px; padding:20px 0;}

  .help-center-nav{gap:14px;}
  .help-center-nav li{padding: 12px;}
  .help-center-nav li img{margin-bottom:14px;}
  .hero .hero__caption span{font-size:.9rem;}

.docs-content-tiles{grid-template-columns: 1fr;}
.docs-content-tiles li img{float:left; margin-right:24px;}
}


@media only screen and (max-width: 768px) {

  .session{background-image:none;}

  /* fix position for "My Dashboard" text in top bar */
  .nav--top ul {
    float: right;
    text-align: right;
    width: auto;
  }
  .nav--top {
    float: right;
    margin: 0;
  }

  /* adjust hero image size and position to just show the circle and change font sizes   */
  picture{display:inline;}
  .hero img {display:none;}
  .hero .hero__caption{width:90vw; top:5em;}
  .hero .hero__caption .hero__title{font-size:2em;}
  .hero .hero__caption span{font-size:1.1em;}
  .dashboard-hero .hero img{display:none;}

  /* adjust name in title bar */
  .company__school-name{
    display: inline-block;
    margin-left:1rem;
  }

  /* hide the menu title for smaller screens */
  .top-bar .title-area{display: none;}
  
  /* place menu items in horizontal layout */
  .top-bar-section ul li{float:left}

  /* reduce spacing for hero image on subpages */
  .layout__content .widget--hero-image:first-of-type{margin:0; padding:20px 0;}


  /*adjust layout for content types section for non logged in page */
  .home-about li.about-block__container .about-block{
    background-position: 50% 2rem;
    background-size: 280px 240px;
  }
  .home-about li.about-block__container .about-block>span{padding-top:300px;}
  .home-about li.about-block__container .about-block__text h3{
    text-transform: none;
    font-size:1.9rem;
  }
  .home-about li.about-block__container .about-block__text p{font-size:1.1rem;}

  /*adjust layout for featured content section for non logged in page */
  .featured-content-block-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
  }
  .featured-content-block-grid li{width:50%}

  /* adjust footer to work at smaller screen */
  .footer{padding:64px 32px;}
  .footer-columns{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .dashboard-stats{flex-direction: row;}
  .dashboard-stats>li{padding:0 .8em;}
  .learn.dashboard .widget--hero-image{padding-bottom:0;}

  /* adjust course page so put navigation on top */
  .learner__container--toggled .learner__content{
    position: relative;
    transform:none;
  }
  .learner__container{padding-top:0;}
  .learner__container--toggled .learner__container__toggle {height:0}
  .learner__container--toggled .learner__sidebar{padding-bottom:0;}

  /* fix webinar block on dashboard to work at smaller screen */
  .webinar-block{margin-top:0;}
  .webinar-block figure{margin:0}
  .webinar-block figure img{
    width:100%;
    height:200px;
    object-fit:cover;
    object-position: 0 -100px;
    border-radius:18px;
    margin-bottom:30px;
  }

  /* fix next webinar box on webinars page to be full width at smaller screen */
  .box-element.webinar-page{
    width:100%;
    margin:50px auto 0;
  }

  /* adjust hero image on webinars page to work as smaller screen */
  .webinars .hero{
    display: flex;
    flex-direction: column;
  }
  .webinars .hero picture{order:2}
  .webinars .hero picture img{
    float: none;
    width: 100%;
    object-fit: cover;
    border-radius: 18px;
    height: 250px;
    object-position: 0 -100px;
  }

  /* for reference guide, hide side nav on smaller screens */
  .side-nav {display: none;}

  .help-center-nav{gap:8px;}
  .help-center-nav li{padding: 10px;}
  .help-center-nav li img{margin-bottom:12px;}

  /*Release Notes Landing page*/
  .release-notes > .ember-view .medium-6{
  width: calc(100% - 32px);
  }
  .release-notes > .ember-view .medium-6 ~ .medium-6 {
    display: none;
  }

}


@media only screen and (max-width: 600px) {


  /* adjust footer to stack lists into grid instead of side by side */
  .footer-columns{grid-template-columns:1fr 1fr;}
  .footer-columns div{margin-bottom:2rem;}

  .home__content .widget{margin:0px 20px 70px 20px;}


  /* adjust background position for webinar image */
  .webinar-block figure img{object-position: 0 -60px;}
  .webinars .hero picture img{object-position: 0 -60px;}

  /* stack the webinar buttons to take full width */
  .webinar-block .box-buttons a{display: block;}

  /* on docs subpages, make the articles boxes full width */
  .strategy-guides-about .ember-view.about-blocks-widget ul li {width: calc(100% - 20px);}

  .help-center-nav li{min-width: 120px;}
  .help-center-nav li img{display:none;}

  .subpage-header .medium-6:last-child{display: none;}

.docs-content-tiles li img{float:none;margin-right:0;}

}


@media only screen and (max-width: 500px) {

  /* hide the hero image */
  picture{display: none;}

  /* make hero text span full width and add some padding underneath */
  .hero .hero__caption{width:100%;}
  .learn.dashboard .widget--hero-image{padding-bottom:1rem;}

  /* switch top menu to hamburger dropdown */
  .top-bar .top-bar-section{display: none;}
  .top-bar.expanded .top-bar-section{display: block;}
  .top-bar .title-area{display: block;}

  /* adjust menu to stack instead of float */
  .top-bar-section ul li{float:none}

  /* adjust featured content elements to full width */
  .featured-content-block-grid li{width:100%}

  /* adjust stats to be vertical and wider */
  .dashboard-stats{flex-direction: column;}
  .dashboard-stats>li{padding:0;}

  /* adjust maginfying glass button to fit in search box */
  .catalog-search__button{bottom:auto;right:15px; top:3px;height:auto;}
  .catalog-search__button i{padding:0;}

  
  /* fix webinar image to be full width and above content */
  .webinar-block figure img{
    width:auto;
    height:auto;
    object-fit:inherit;
    object-position: 0;
  }

  /* in webinar info box, stack "next webinar" and date */
  .box-element .box-heading{display: block;}
  .box-element .box-heading p{margin-bottom:.5rem;}

  
  /* on Webinars page fix webinar image to full width */
  .webinars .hero picture{display:block}
  .webinars .hero picture img{
    width: auto;
    object-fit: inherit;
    object-position: 0;
    height:auto;
  }

  /* reduce padding above the webinar info box*/
  .box-element.webinar-page{margin:30px auto 0;}

  /* Release Notes Landing page */
  .home__content .release-notes{
    padding: 0;
    }

}

/* COOKIE CONTROLS */
/* Used to customise TI localisation button */
button#ot-sdk-btn { 
     z-index: 1;
    position: fixed;
  left: 0.2rem !important;
  bottom: 0.2rem !important;
  right:auto!important;
}
 
button#ot-sdk-btn,
.learner__language__selector * {
  font-family: 'MarkForMCNarrow', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif !important;
  transition: all ease 125ms !important;
  color: #141413 !important;
}
 
.learner__language__selector {
  position:fixed;
  top: auto !important;
  right: 0.2rem !important;
  bottom: 0.2rem !important;
  left: auto !important;
  white-space: nowrap !important;
    margin-bottom: 16px;
}
 
.learner__language__selector__btn {
  background-color: #f8fafc !important;
  font-size: 0.8em !important;
}
 
.learner__language__selector__btn,
.learner__language__selector__btn ul {
  border-radius: 2px !important;
  border: 1px solid #141413 !important;
  text-align: center;
}
 
.learner__language__selector__btn ul {
  background-color: #f8fafc !important;
  font-size: 1em !important;
  padding-top: 0 !important;
  left: -1px !important;
}
 
.learner__language__selector__btn,
.learner__language__selector__btn li {
  height: auto !important;
  line-height: normal !important;
  padding: 0 !important;
  min-width: calc(100% + 1.5px) !important;
}
 
.language-selector-content {
  padding: 0.8em 1.5em !important;
}
 
.learner__language__selector__btn li {
  padding-block: 0.8em !important;
}
 

.learner__language__selector__btn li:nth-of-type(1) {
  display: none;
}

.language-selector-content:hover {
  background-color: #cf4500 !important;
  color: #ffffff !important;
}
 
.learner__language__selector__btn li:hover {
  background-color: transparent !important;
  box-shadow: inset 8px 0 0 0 #cf4500;
} 

  @-webkit-keyframes slidein {
    0%{top: 400px;opacity: 0;}
    100% {opacity: 1;top: 0px;}
  }
  @keyframes slidein {
    0% {top: 400px;opacity: 0;}
    100% {opacity: 1;top: 0px;}
  }
  @-webkit-keyframes slideout {
    0% {top: 0;opacity: 1;}
    100% {top: 400px;opacity: 0;}
  }
  @keyframes slideout {
    0% {top: 0;opacity: 1;}
    100% {top: 400px;opacity: 0;}
  }
  #newbox{
    position: relative;
    background:var(--neutral-3);
    text-align: center;
    margin: 0 -48px;
    padding: 44px 64px 64px 64px;
    font-family: museo-sans;
  }
  #whatsnew {
  display: flex;
  position: relative;
  overflow: hidden;
  padding: 30px;
  text-align: left;
  width: 1000px;
  height: 208px;
  margin: 0 auto;
  font-family: proxima-nova;
}
#whatsnew #left-zone .list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300px;
}
#whatsnew #left-zone .list li.item input[type=radio] {display: none;}
#whatsnew #left-zone .list li.item input[type=radio] ~ label {
  display: block;
  margin: 0 0 12px 12px;
  padding-right: 12px;
  line-height: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ label:hover {
  opacity: 0.75;
  cursor: pointer;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ label span.listnum {
  display: inline-block;
  background-color: #D3E1F5;
  color: #2B59C3;
  padding: 12px;
  border-radius: 20px;
  margin-right:12px;  
  width: 34px;
  text-align: center;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content {
  position: absolute;
  left: 350px;
  top: -400px;
  width: 650px;
  display: flex;
  align-items: start;
  gap: 6px;
  flex: 1 0 0;
  align-self: stretch;
  background-color: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-name: slideout;
          animation-name: slideout;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content .content-text {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
  align-self: stretch;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content .content-type {
  background-color: #D3E1F5;
  color:#2B59C3;
  padding: 4px 8px;
  position: absolute;
  right: 16px;
  top:16px;
  border-radius: 4px;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content .content-action {
  color: #ffffff;
  background-color:#2B59C3;
  padding: 8px 12px;
  align-self: end;
  border-radius: 2px;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content img{
  width: 240px;
  object-fit: cover;
  height:205px;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content h2 {
  margin: 0;
  padding-right: 75px;
  font-family:museo-sans;
}
#whatsnew #left-zone .list li.item input[type=radio] ~ .content p {
  margin: 0;
  font-size: 18px;
}
#whatsnew #left-zone .list li.item input[type=radio]:checked ~ label {
  background-color: #D3E1F5;
  color: #2B59C3;
  border-radius: 20px;
  opacity: 1;
  -webkit-animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
#whatsnew #left-zone .list li.item input[type=radio]:checked ~ label span.listnum {
  background-color: #2B59C3;
  color: #ffffff;
}
#whatsnew #left-zone .list li.item input[type=radio]:checked ~ .content {
  -webkit-animation-duration: 0.75s;
          animation-duration: 0.75s;
  -webkit-animation-name: slidein;
          animation-name: slidein;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@media only screen and (max-width: 1100px) {

  #whatsnew #left-zone .list{
    display: flex;
    width: 100%;
  }
  #whatsnew #left-zone .list li.item input[type=radio] ~ .content{
    left: 50px;
    overflow: hidden;
  }
  @-webkit-keyframes slidein {
    0%{top: 500px;opacity: 0;}
    100% {opacity: 1;top: 80px;}
  }
  @keyframes slidein {
    0% {top: 500px;opacity: 0;}
    100% {opacity: 1;top: 80px;}
  }
  @-webkit-keyframes slideout {
    0% {top: 80px;opacity: 1;}
    100% {top: 500px;opacity: 0;}
  }
  @keyframes slideout {
    0% {top: 80px;opacity: 1;}
    100% {top: 500px;opacity: 0;}
  }
 #whatsnew{
height: 280px;
width: 709px;
 }

}

@media only screen and (max-width: 770px) {
  #whatsnew #left-zone .list{
    display: block;
    width: 100%;
  }
  @-webkit-keyframes slidein {
    0%{top: 800px;opacity: 0;}
    100% {opacity: 1;top: 180px;}
  }
  @keyframes slidein {
    0% {top: 800px;opacity: 0;}
    100% {opacity: 1;top: 180px;}
  }
  @-webkit-keyframes slideout {
    0% {top: 180px;opacity: 1;}
    100% {top: 800px;opacity: 0;}
  }
  @keyframes slideout {
    0% {top: 180px;opacity: 1;}
    100% {top: 800px;opacity: 0;}
  }
  #whatsnew{
    height: 550px;
    width: 450px;
    flex-direction: column;
  }
  #whatsnew #left-zone .list li.item input[type=radio]:checked ~ .content {
    flex-direction: column;
    width: 400px;
  }
  #whatsnew #left-zone .list li.item input[type=radio] ~ .content img{
    width: 100%;
    max-height: 220px;
  }
  #whatsnew #left-zone .list li.item input[type=radio] ~ label {
    display: inline-block;
  }
  #whatsnew #left-zone .list li.item input[type=radio] ~ .content .content-type {
    top:246px;
  }

}