/** https://www.w3schools.com/css/css3_fonts.asp **/
@font-face {
	font-family: MarkPro;
	src: url("fonts/mark-pro/MARKPRO.OTF");
}

@font-face {
	font-family: MarkProBold;
	src: url("fonts/mark-pro/MARKPROBOLD.OTF");
}

@font-face {
	font-family: MarkProMedium;
	src: url("fonts/mark-pro/MARKPROMEDIUM.OTF");
}

@font-face {
	font-family: MarkProLight;
	src: url("fonts/mark-pro/MARKPROLIGHT.OTF");
}

@font-face {
	font-family: MarkProBook;
	src: url("fonts/mark-pro/MARKPROBOOK.OTF");
}

@font-face {
	font-family: MarkProBlack;
	src: url("fonts/mark-pro/MARKPROBLACK.OTF");
}

@font-face {
	font-family: MarkProExtraLight;
	src: url("fonts/mark-pro/MARKPROEXTRALIGHT.OTF");
}

@font-face {
	font-family: Montserrat;
	src: url("fonts/montserrat/Montserrat-Regular.ttf");
}

@font-face {
	font-family: Montserrat-Medium;
	src: url("fonts/montserrat/Montserrat-Medium.ttf");
}

@font-face {
	font-family: Montserrat-SemiBold;
	src: url("fonts/montserrat/Montserrat-SemiBold.ttf");
}



/* NGA font */
@font-face {
  font-family: "NGA";
  src: url("fonts/nga/NGA-Regular.eot");
  src: url("fonts/nga/NGA-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGA-Regular.woff2") format("woff"), url("fonts/nga/NGA-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NGA Bold";
  src: url("fonts/nga/NGA-Bold.eot");
  src: url("fonts/nga/NGA-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGA-Bold.woff2") format("woff"), url("fonts/nga/NGA-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NGA Regular Italic";
  src: url("fonts/nga/NGA-RegularItalic.eot");
  src: url("fonts/nga/NGA-RegularItalic.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGA-RegularItalic.woff2") format("woff"), url("fonts/nga/NGA-RegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NGA Bold Italic";
  src: url("fonts/nga/NGA-BoldItalic.eot");
  src: url("fonts/nga/NGA-BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGA-BoldItalic.woff2") format("woff"), url("fonts/nga/NGA-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NGA Condensed Regular";
  src: url("fonts/nga/NGACond-Bold.eot");
  src: url("fonts/nga/NGACond-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGACond-Bold.woff2") format("woff"), url("fonts/nga/NGACond-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NGA Condensed Bold";
  src: url("fonts/nga/NGACond-Bold.eot");
  src: url("fonts/nga/NGACond-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGACond-Bold.woff2") format("woff"), url("fonts/nga/NGACond-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NGA Condensed Italic";
  src: url("fonts/nga/NGACond-BoldItalic.eot");
  src: url("fonts/nga/NGACond-BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGACond-BoldItalic.woff2") format("woff"), url("fonts/nga/NGACond-BoldItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "NGA Condensed Bold Italic";
  src: url("fonts/nga/NGACond-BoldItalic.eot");
  src: url("fonts/nga/NGACond-BoldItalic.eot?#iefix") format("embedded-opentype"), url("fonts/nga/NGACond-BoldItalic.woff2") format("woff"), url("fonts/nga/NGACond-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* Brut font */
@font-face {
	font-family: "Brut Bold";
	src: url("fonts/brut/Brut-Bold.otf");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Brut Bold Italic";
	src: url("fonts/brut/Brut-BoldItalic.otf");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Brut Regular";
	src: url("fonts/brut/Brut-Regular.otf");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Brut Regular Italic";
	src: url("fonts/brut/Brut-RegularItalic.otf");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Brut Condensed Bold";
	src: url("fonts/brut/BrutCond-Bold.otf");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Brut Condensed Bold Italic";
	src: url("fonts/brut/BrutCond-BoldItalic.otf");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Brut Extension Bold";
	src: url("fonts/brut/BrutExt-Bold.otf");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Brut Extension Bold Italic";
	src: url("fonts/brut/BrutExt-BoldItalic.otf");
	font-weight: bold;
	font-style: italic;
	font-display: swap;
}
/* Brut font: END*/

/* https://github.com/locomotivemtl/locomotive-scroll/issues/72 */
html, body {
   width: 100%;
   height: 100vh;
}

body {
	background-color: #FFFFFF;
	font-family: "Brut Regular", "Helvetica Neue", sans-serif;
	overflow-x: hidden; 
	overflow-y: auto;
}

button, html, input, select, textarea {
	font-family: "Brut Regular", "Helvetica Neue", sans-serif;
}

input[type="checkbox"] {
	width: 23px;
	height: 23px;
	margin: 4px 12px 0 0;
	vertical-align: bottom;
}

a {
	color: #000000 !important;
	cursor: pointer !important;
}

/* STC-6217: Links should be underlined */
.link-underline {
	text-decoration: underline !important;
}

a:hover {
	opacity: 0.5 !important;
	transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
}

/* STC-6181: introduced hr style */
/* STC-6294: Do not style the horizontal line within the narratives */
/* STC-6375,6376,6377: Remove left/right margins for fixing line span edge to edge */
hr:not(.narrative-content *) {
	margin-top: 10px;
	margin-bottom: 30px;
	border: 0;
	border-top: 1.5px solid #000;
}

/* STC-6181: overriding angularjs font size for checkbox label */
md-checkbox .md-label {
	font-size: 16px;
	text-transform: uppercase;
	/* STC-6324,6325:[Landing/Search Result page] 'INCLUDING PART' cannot be wrapped */
	white-space: nowrap;
}

/* hide "X" button on input field in IE */
::-ms-clear {
	display: none;
}

.error-container {
	padding: 10rem;
	text-align: center;
}

/* STC-6383,6395: Avoid different-size webpages can scroll the page left and right (marginally)
Reference https://stackoverflow.com/questions/15769229/how-to-prevent-horizontal-scrolling-on-responsive-webpage */
.site-wrapper {
	overflow-x: hidden;
	position: relative;
	height: 100%;
	width: 100%;	
	margin: 0;
	display: flex;
	flex-direction: column;
}

.site-content {
	background-color: #FFFFFF;
	height: auto;
	position: relative;
}

.loading-icon-center {
	margin: 20px auto;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.section-container {
	padding: 42px 0 42px 0;
}

/* STC-6344: Stop the scrolling */
.no-scroll {
	overflow: hidden;
}

/* STC-6114 & 6115: Remove padding bottom for section container in 'Art & ideas' block */
.art-and-ideas-container .section-container {
	padding: 42px 0 0 0;
}

/* STC-6181: changed the display from flex to block  */
.section-container.popular-searches-container {
	display: block;
}

/* STC-6181: removed the extra padding and margin */
.topic-container .section-header-container {
	padding-bottom: 0px;
	margin-bottom: 0px;
	position: relative;
}

.section-header-container {
	padding-bottom: 10px;
	margin-bottom: 20px;
	position: relative;
}

/* STC-6114 & 6115: Remove margin bottom for 'section-header-container' class in 'Art & ideas' block */
carousel#aboutWork .section-header-container,
carousel#aboutArtist .section-header-container,
carousel#workReferences .section-header-container,
carousel#artistReferences .section-header-container {
	margin-bottom: 0;
}

.section-title {
	font-family: "NGA Condensed Bold";
	font-weight: bold;
	font-size: 36px;
	line-height: 120%;
}

/* STC-6328: Add spacer for title alignment */
.title-spacer {
	width: 90px;
    height: 10px;
}

#relatedParts .section-title,
#otherWorksBy .section-title,
#otherWorksFromCollection .section-title,
#otherWorksFromDepartment .section-title,
/* STC-6213: Removing #fromTheSameTimeAndPlace from section-title as it no longer use this css property */
#worksMadeWith .section-title,
#worksFeaturing .section-title {
	font-family: "NGA Condensed Bold";
	color: #999999;
}

/* STC-6119: Redesign all the carousel titles and subtitles */
/* STC-6114 & 6115: Add carousels in 'Art & ideas' block */
#aboutWork .section-title-and-subtitle,
#aboutArtist .section-title-and-subtitle,
#workReferences .section-title-and-subtitle,
#artistReferences .section-title-and-subtitle,
/* STC-6181: Include featured-artists, popular searches from the landing page & artists from result page */
.topic-container .section-title,
.result-topics-container .section-title,
#resultArtists .section-title-and-subtitle,
#featuredArtists .section-title-and-subtitle,
#relatedParts .section-title-and-subtitle,
#otherWorksBy .section-title-and-subtitle,
#otherWorksFromCollection .section-title-and-subtitle,
#otherWorksFromDepartment .section-title-and-subtitle,
/* STC-6162: Update naming to reflect the changes in query (BCE, century and decade) */
/* STC-6213: Fixing the font size for #fromTheSameTimeAndPlace */
#fromTheSameTimeAndPlace .section-title-and-subtitle,
#worksMadeWith .section-title-and-subtitle,
#worksFeaturing .section-title-and-subtitle {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 3.2rem;
	text-transform: uppercase;
	line-height: 120%;
	color: #000000;
	margin-bottom: 1.5rem;
}

/* STC-6270 & 6274: Adjust sub-heading case-type in the "Art & Ideas" block */
#aboutWork .section-title-and-subtitle,
#aboutArtist .section-title-and-subtitle,
#workReferences .section-title-and-subtitle,
#artistReferences .section-title-and-subtitle {
	text-transform: none;
}

/* Moved this class over from grid.css */
/** [Landing page] 'VIEW ALL' link container, carousels are:
	- ON DISPLAY
	- NEW TO THE COLLECTION
***/
/* STC-6263: Modify container */
/* STC-6328: Adjust alignment for 'View all' action */
.landing-view-all-container {
	font-family: "Brut Regular";
	font-weight: normal;
	font-size: 14px;
	line-height: 26px;
	text-align: right;
	display: flex;
    align-items: flex-end;
    margin-top: auto;
}

/** 'VIEW ALL' link container in these carousels:
	- Object page: RELATED PARTS [CHILDREN] / [PARENTS]
	- Object page: OTHER WORKS BY [ARTIST]
	- Object page: OTHER WORKS FROM [COLLECTION] / [DEPARTMENT]
	- Object page: FROM THE SAME [TIME] AND [PLACE]
	- Artist page: WORKS MADE WITH [ARTIST]
	- Artist page: WORKS FEATURING [ARTIST]
***/
/* STC-6119: Modify the alignment */
/* STC-6328: Adjust alignment for 'View all' action */
.section-view-all-container {
	font-family: "Brut Regular";
	font-weight: normal;
	font-size: 14px;
	line-height: 26px;
	text-align: right;
	display: flex;
	align-items: flex-end;
	margin-bottom: 1.5rem;
	margin-top: auto;
}

/* Move 'load-more-btn' to grid.css */

/* STC-6119: Redesign carousel button */
/* STC-6181: applied the same style for view more buttons on landing page  */
/* STC-6245: [Carousels] Reset "VIEW ALL" link - text layouts  */
/* STC-6221, 6263, 6297, 6298: Remodify 'VIEW ALL' link alignment */
/* STC-6328: Adjust alignment for 'View all' action */
.carousel-view-all-btn {
	text-align: left;
	color: #000000;
	/* STC-6227: The background color should be transparent */
	background-color: transparent;
	/* STC-6180: [Artist Page] Update font-face and size */
	font-family: "Brut Regular";
	font-size: 1.6rem;
	text-transform: uppercase;
	border: none;
	cursor: default !important;
	outline: none;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	right: -20px;
	/* STC-6559, 6560: Remove the underline */
	text-decoration: none !important;	
}
/* STC-6181: applied the same style for view more buttons on landing page  */
/* STC-6245: [Carousels] Reset "VIEW ALL" link - when mouse over  */
/* STC-6227: The background color should be transparent when mouse over */
.carousel-view-all-btn:hover {
	color: #000000;
	background-color: transparent;
	/* STC-6221, 6263, 6297, 6298: Remodify 'VIEW ALL' link */
	transition: none !important;
	opacity: 1 !important;
}


/* STC-6119: New design for the 'right arrow' */
/* STC-6181: applied the same style for view more buttons on landing page  */
/* STC-6245: [Carousels] Reset "VIEW ALL" link - the right arrow design  */
/* STC-6221: Update position property */
/* STC-6328: Adjust alignment for 'View all' action */
.carousel-view-all-btn .fa-arrow-right {
	margin-left: 10px;
	color: black;
	transform: translateX(-120%);
	opacity: 0;
}
/* STC-6119: New design for the 'right arrow' */
/* STC-6181: applied the same style for view more buttons on landing page  */
/* STC-6245: [Carousels] Reset "VIEW ALL" link - the right arrow design when mouse over  */
.carousel-view-all-btn:hover .fa-arrow-right {
	opacity: 1;
	transform: translateX(-6px);
	transition: 100ms;
}

/* STC-6119: Modify the load-more-button */
/* STC-6181: applied the same style for view more buttons on landing page  */
/* STC-6245: [Carousels] Reset "VIEW ALL" link - the right arrow design before mouse over  */
.carousel-view-all-btn::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	transform: scaleX(0);
}
/* STC-6559, 6560: VIEW ALL should have focus outline */
.carousel-view-all-btn:focus {
	outline: #444444 solid 2px;
	cursor: default !important;
}
.carousel-view-all-btn:focus .fa-arrow-right {
	opacity: 1;
	transform: translateX(-6px);
	transition: 100ms;
}
/* STC-6119: Carousel break line */
.carousel-rule-line {
	/* STC-6264, 6265, 6266, 6267: Change the line weight */
	border-bottom: 1px solid #000000;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}
/* STC-6114 & 6115: Add count in carousel title */
.carousel-count {
	font-family: 'Brut Bold';
	/* STC-6290: Change the font-size from 16px to 18px */
	font-size: 18px;
	top: -0.8em;
	margin-left: 6px;
}

.header-container {
	min-height: 112px;
	background: #FFFFFF;
	padding: 2em;
	margin-bottom: 0;
}

.header {
	left: 0;
	right: 0;
	padding: 0 20px;
	color: #181818;
	background-color: #fff;
}

.header-logo {
	width: 120px;
}

.header-inner-container {
	padding: 10px 0; 
}

.header-menubar-container {
	padding-top: 1%;
	font-size: 14px;
	font-weight: 400;
	line-height: 22.82px;
}

.header-submenu-container {
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
	z-index: 4;
	right: 0;
	top: 50px;
	display: none;
}

.header-submenu-item {
	padding: 12px 16px;
	display: block;
}

.header-submenu-item:hover {
	background: #ddd;
}

.nav > li > a:hover {
	cursor: pointer;
}
.nav > li > a:hover .header-submenu-container {
	display: block;
}

.navbar-toggle.header-menu-btn {
	top: 1em;
}

.navbar-collapse .md-button.md-icon-button {
	margin: 0;
}

.nav > li > a {
	color: inherit;
}

.ngacdl-flex-row-container,
.card-actions {
	display: flex;
	flex-direction: row;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: flex-start;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-direction: row;
}

.ngacdl-flex-row-container .flex-item {
	flex: none;
	order: 0;
	flex-grow: 0;
}

.ngacdl-flex-column-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
}

.ngacdl-flex-row-container.align-center,
.ngacdl-flex-column-container.align-center {
	align-items: center;
}

.ngacdl-flex-row-container.align-end,
.ngacdl-flex-column-container.align-end {
	align-items: flex-end;
}

.ngacdl-flex-row-container.justify-end,
.ngacdl-flex-column-container.justify-end {
	justify-content: flex-end;
}
/* STC-6181: fixed the alignment issue on narrow screen */
.ngacdl-flex-row-container.justify-space-between {
	justify-content: space-between;
	flex-direction: row;
}

.ngacdl-flex-column-container .flex-item {
	flex: none;
	order: 1;
	flex-grow: 0;
	margin: 0px 0px;
}
/* STC-6181: changed the width to auto */
.ngacdl-flex-row-container .checkbox-div {
	width: auto;
    height: 23px;
    padding-left: 40px;
    margin-top: 4px;
}

/*
 * CHIPS
 */
.stc-chips {
 	display: inline;
}
 
 /* STC-6378: Adjust alignment for the topic container */
.topic-container .stc-chips {
 	display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
}

/* STC-6324,6325:[Landing/Search Result page] Add new class to modify filters list alignment */
.stc-chips-filters-list {
	display: inline;
}

.filter-panel-chips-container {
	margin-top: 14px;
	margin-bottom: 7px;
}
/* STC-6181: font-family added, decreased the border radius 8px, switched the color of font and background */
.stc-chip {
	font-family: 'Brut Regular';
	font-size: 16px;
	cursor: default;
	border-radius: 8px;
	display: block;
	height: 28px;
	line-height: 28px;
	margin: 0 8px 8px 0;
	padding: 0 9px;
	float: left;
	box-sizing: border-box;
	max-width: 100%;
	position: relative;
	background: #FFFFFF;
    color: #000000;
	height: auto; /* STC-6382: Not wrapping the long-text */
}
/* STC-6186: new style for chip on result page */
#stc-results .add-filter-container .stc-chip {
	background-color: #000000;
	color: #FFFFFF;
} 
/* STC-6186: new style for chip on result page */
#stc-results .stc-chip.add-filter-chip {
	background: transparent;
	border: 1px solid #000000;
	color: #000000;
	cursor: pointer;	
	display: flex;
	align-items: center;
	justify-content: center
}

.stc-chip:focus {
	outline: none;
}

.stc-chip .chip-label {
	margin-right: 1px;
}

.stc-chip.icon {
	padding-right: 25px;
}

.stc-chip.icon.add-filter-chip {
	padding-right: 0px;
}

.stc-chip.add-filter-chip {
	background: transparent;
	border: 1px solid #000000;
	color: #000000;
	cursor: pointer;	
	display: flex;
	align-items: center;
	justify-content: center
}

.stc-chip.add-filter-chip:focus{
	outline: none;
}

.stc-chip.add-filter-chip.no-keyword {
	border: 1px solid #bbbbbb;
	color: #bbbbbb;
}
/* STC-6181: changed font style, increased the size */
.add-filter-label {
	font-family: "Brut Regular";
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 25px;	/*STC-6382: increase line-height*/
	text-transform: uppercase;
}

.stc-chip-icon-container {
	position: absolute;
	line-height: 18px;
	top: 5px;
	right: 5px;	
}

.stc-chip-icon-container:focus {
	outline: none;	
}

.stc-chip-icon-container .fa-times-circle {
	font-size: 12px;
	margin-right: 1px;
}


/* 
 * Topic chips 
 */
 /* STC-6181: reduced border radius, updated background color & font color   */
.topic-container .stc-chip {
	height: 46px;
	line-height: 46px;
	border-radius: 10px;
	margin: 0 22px 22px 0;
	cursor: pointer;
	color: #FFFFFF;
	background-color: #000000;
}
/* STC-6181: changed font */
.topic-container .stc-chip .stc-chip-label {
	font-family: 'Brut Regular';
	font-size: 18px;
	padding: 10px;
}

/*
 * SCROLLBAR
 * https://codepen.io/devstreak/pen/dMYgeO
 */
.ngacdl-scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.ngacdl-scrollbar::-webkit-scrollbar {
	width: 8px;
	background-color: #F5F5F5;
}

.ngacdl-scrollbar::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}


/** Footer **/
.footer {
	margin-top: auto;
}

.footer-row {
	padding: 46px 188px;
}

.footer-row:after {
	content: "";
	display: table;
	clear: both;
}

.footer-column {
	float: left;
	width: 33.33%;
	padding: 10px;
}


/*
 * CAROUSEL (directive)
 */
 /* STC-6229: Remove the maximum height for the carousel content */
.carousel-content {
	display: inline-block;
	vertical-align: middle;
	/* STC-6546: Fixed missing focus outline for the first left Object in carousel slick */
	margin: 0 40px 20px 3.5px;
	position: relative;
	color: #444444;
	
	/* STC-6148: Increase the default size of the carousel items' container */
	height: auto;
	width: 350px;
	min-width: 180px;	
}
 
.carousel-content:focus {
	outline: none;
}

.carousel-image-container {
	width: 100%;
	margin-bottom: 13px;
	display: flex;
	justify-content: center;
	
	 /* STC-6329: Fix the issue where carousel items are not top-aligned in Safari */
	align-items: flex-start;
	
	 /* STC-6229: Set the height of the carousel image container to auto */
	height: auto;	
}

.carousel-image-container img {
    text-align: center;
    display: block;
    position: relative;
    object-fit: cover;
    /* STC-6229: Set the maximum height of the carousel image for better look */
	max-height: 600px;
	/* STC-6193: objects should be top-aligned regardless of the thumbnail size */
	/* STC-6229: Revert the change from STC-6193 to avoid images being cropped */
	margin: auto;
}

.carousel-image-container img:before { 
	content: " ";
	display: block;
	position: absolute;
	left: 0;
	height: calc(100%);
	width: 100%;
	background-color: rgb(230, 230, 230);
}

.carousel-image-container img:after { 
	content: "Image Unavailable";
	display: block;
	color: rgb(165, 158, 158);
	width: 100%;
	font-style: italic;
	font-size: 30px;
	/** align vertically **/
	margin: 0;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.carousel-line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* STC-6114 & 6115: Set the line limit for text clamp to 3 for carousels in 'Art & ideas' block */
.art-and-ideas-container .grid-info-title.carousel-line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.slick-next.carousel-arrow-btn,
.slick-prev.carousel-arrow-btn {
	background: rgba(68, 68, 68, 0.8);
	width: 42px;
	height: 42px;
	font-size: 18px;
	color: #FFFFFF;
	z-index: 1;
	top: 40%;
}

.slick-next.carousel-arrow-btn:before,
.slick-prev.carousel-arrow-btn:before {
    content: '';
}

.slick-prev .fa-chevron-left {
    font-size: 18px;   
    line-height: 150%;
    margin-right: 2px;
}

.slick-next .fa-chevron-right {
    font-size: 18px;
    line-height: 150%;
    margin-left: 2px;
}

/* 
 * STC-6306 & 6307: Support displaying icons on carousel images 
 * This section is adapted from NGA site: _component.global_ui.scss
 */
.page-promo__icon {
    width: 4.8rem;
    height: 4.8rem;
    position: absolute;
    z-index: 1;
    top: 1.5rem;
    left: 1.5rem;
}

.page-promo__icon > span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: opacity 0.5s ease-in-out;
}

.page-promo__icon > span.rollout.video {
    background-image: url("../img/materials/icon-stroke-video-white.svg");
}

.page-promo__icon > span.rollout.audio {
	 background-image: url("../img/materials/icon-stroke-audio-white.svg");
}

.page-promo__icon > span.rollover {
    background-image: url("../img/materials/icon-stroke-play-white.svg");
    opacity: 0;
}

 div.carousel-content:hover .page-promo__icon > span.rollover {
	 opacity: 1;
}
 div.carousel-content:hover .page-promo__icon > span.rollout {
	 opacity: 0;
}
 
/*** 	End of STC-6306 & 6307 	***/

/********** Sensitivity information page **********/

.landing-info-container {
	background: #FFFFFF;
	margin-top: 45px;
}

.landing-info-auto-layout {
	display: flex;
    padding: 35px;
}

/* STC-6349: [Landing-info page] Change color */
.landing-info-item {
	width: 800px;
	margin: 0px auto;
	color: #000000;
}

.landing-info-title-container {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

/* STC-6349: [Landing-info page] Update typeface and style */
.landing-info-title {
	font-family: "Brut Condensed Bold";	
	font-weight: bold;
	font-size: 60px;
	line-height: 46px;
	color: #000000;
	margin: 0;
}

.landing-info-subheading1-container {
	top: 164px;
	margin-top: 37px;
	
}

/* STC-6349: [Landing-info page] Update typeface and style */
.landing-info-subheading {
	font-family: "Brut Bold";
	font-size: 20px;
	line-height: 23px;	
}

.landing-info-subheading2-container {
	margin-top: 30px;
}


.landing-info-paragraph-container {
	margin-top: 10px;
}

/* STC-6349: [Landing-info page] Update font-size */
.landing-info-paragraph {
	font-family: "Brut Regular";
	font-size: 18px;
	line-height: 175%;
}

/* STC-6349: [Landing-info page] Update info button style */
.landing-info-button {
	background: #000000;
	border: 1px solid #000000;
	box-sizing: border-box;
	border-radius: 5px;
	color: #FFFFFF;
	padding: 14px;
	font-family: "Brut Regular";
	font-size: 18px;
	line-height: 18px;
	float: right;
	margin-top: 40px;
}

/********** Sensitivity information page end **********/

/********** Landing page **********/
.landing-search {
	height: 100%;
	color: #FFFFFF;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #3d3d3d;
}

/* STC-6180: Remove 'result-container' to redesign Artist page */
.landing-content,
.landing-search-container,
.filter-container {
	padding-left: 10%;
	padding-right: 10%;
}

/* STC-6119: Reset the entire page left/right margin on object page */
/* STC-6180: Reset the entire page left/right margin on Artist page */
.landing-content,
.landing-search-container,
.object-container,
.nav-container,
/* STC-6245: [Artist page] Add .artist-grid-container to reset Carousel title  */
.artist-grid-container,
.results-container,
/* STC-6259: [Filters panel] Add .filter-container for filters panel to match the landing page's margins and paddings */
.filter-container {
	margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-bottom: 0;
    padding-left: calc(1.5rem + 1.25vw);
    padding-right: calc(1.5rem + 1.25vw);
    padding-bottom: calc(1.5rem / 2 + 0.625vw);
}

.landing-search-container {
	padding-top: 10%;
	padding-bottom: 10%;
}

.landing-search-inner-container {
	max-width: 80%;
}

/* STC-6181: font-family changed, removed bold style, increased font size to 100px */
.landing-search .title {
	font-family: "Brut Condensed Bold";
	font-style: normal;
	font-size: 100px;
	font-weight: 700;
	line-height: 91px;
	margin-bottom: 15px;
}
/* STC-6181: font-family made bold, increase font size to 32px */
.landing-search .content {
	font-family: 'Brut Bold';
	font-size: 32px;
	font-weight: 400;
	line-height: 23px;
	margin-bottom: 20px;
}
/* STC-6181: font-family made bold, increase font size to 32px, increased the line-height */
.landing-search .sub-content {
	font-family: 'Brut Bold';
	font-size: 32px;
	font-weight: 400;
	line-height: 35px;
	margin-bottom: 20px;
}

.landing-search .new-updates {
	padding-top: 5px;
}

.landing-search .new-updates:after {
	content: "";
	display: table;
	clear: both;
}
/* STC-6181: font-family, specify font size to 16 px */
.landing-search .new-updates .update-title {
	font-family: 'Brut Regular';
	font-weight: 700;
    font-size: 16px;
	margin-right: 51px;
	/* STC-6260: Title text should be uppercase */
	text-transform: uppercase;
}

/* STC-6181: font-family, specified font size 16 px */
.landing-search .new-updates .link {
	margin-right: 51px;
	font-family: 'Brut Regular';
	font-size: 16px;
}

.landing-search .new-updates .link a {
	color: #FFFFFF !important;
	text-decoration: underline;
    font-weight: 400;
}

.landing-search .new-updates .link a:hover {
	cursor: pointer;
}

.landing-search .search-filter {
	padding-top: 45px;
}


/* Result Card */
.landing-content .card-container {
	padding-top: 5em;
}

.landing-content .card-container:last-child {
	margin-bottom: 80px;
}

.card-container {
	position: relative;
}

/* STC-6328: Adjust margin for title */
.landing-collection-header,
.landing-digitised-header {
	margin-bottom: 20px;
}

/* STC-6180: [Artist Page] Modify font properties */
.card-title {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 3.2rem;
	line-height: 120%;
	color: #000000;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

/* STC-6328: Adjust margin for title */
.landing-collection-header .card-title,
.landing-digitised-header .card-title {
	margin-bottom: 0;
}

/* STC-6180: [Artist Page] Modify font properties */
.card-title sup {
	font-size: 1.8rem;
	font-weight: bold;
	top: -0.7em;
}

sup.grid-count {
	margin-left: 6px;
}

.card-title q {
	font-style: normal;
}

.card-header-set .subtitle {
	font-family: "NGA Condensed Bold";
	font-weight: 700;
	font-size: 36px;
	line-height: 46px;
	color: #999999;
}

.popular-searches {
	position: relative;
	margin-top: 22px;
	padding-bottom: 104px;
}

/********** Landing page end **********/


/********** Results page **********/
/* STC-6186: removed bottom padding */
.results-container .search-filter {
	padding-top: 3em;
}

/* STC-6186: reduced the bottom margin */
.results-container hr {
	margin-bottom: 10px;
}

/* STC-6186: reduced the bottom margin */
.results-container .card-title {
	text-transform: none;
    font-family: "Brut Condensed Bold";
    font-size: 100px;
   	line-height: initial;
   	overflow-wrap: break-word;
}

/* STC-6186: reduced the bottom margin */
.results-container .card-header-set .subtitle {
	font-family: 'Brut Bold';
    font-size: 32px;
    line-height: 46px;
    color: #000000;
}

/* 
 * Topic chips on Results
 */
 /* STC-6181: removed extra white space */
.result-topics-container .section-header-container {
	padding-bottom: 0px;
    margin-bottom: 0px;
    position: relative;
} 

/* STC-6332: Add 'stc-search-icon' to fix the token text alignment */
.result-topics-container .topic-container .stc-chip .stc-search-icon {
	padding-top: 2px;
    display: block;
	float: left;
}

/* STC-6181: increased the font size */
.result-topics-container .topic-container .stc-chip .stc-chip-label {
	font-family: 'Brut Regular';
	font-size: 18px;
	padding: 10px;
}

/* STC-6186: increased font size */
.sorting-select-container {
    outline: none;
    border: none;
    user-select: none;
    position: relative;
    font-size: 16px;
    text-transform: uppercase;
}

.sorting-select-container:hover,
.sorting-select-container:focus {
	cursor: pointer;
	background-color: #eee;
}

.sorting-inner-container {
	padding: 15px;
}

.sorting-inner-container:focus {
	outline: none;
}

.sorting-inner-container .fa-chevron-down {
	font-style: normal;
	font-weight: 900;
	font-size: 14px;
	line-height: 16px;
	margin-left: 6px;
}

.sorting-inner-container .sort-by-label {
	font-family: NGA Condensed Normal;
	font-weight: normal;
	font-size: 14px;
	line-height: 18px;
}

ul.sorting-option-container {
	list-style: none;
	padding-left: 0;
}

.sorting-option-container {
	text-transform: uppercase;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 115px;
	box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
	z-index: 3;
	right: 0;
	top: 50px;
	display: none;
}

.sorting-option-container.visible {
	display: block;
}

.sorting-option {
	padding: 12px 16px;
	display: block;
}

.sorting-option:hover {
	background: #ddd;
}

/* STC-6186: changed font color, increased font size */
.sorting-label {
	padding: 15px 0;
	font-size: 16px;
	color: #000000;
	text-transform: uppercase;
}

.nav-container {
	background: #FAFAFA;
}

/* STC-6114 & 6115: Set the background color for 'Art & ideas' block */
.art-and-ideas-container.nav-container,
.embedded-section.nav-container {
	background: #FFFFFF;
}

/* STC-6306 & 6307: minor CSS enhancement */
.art-and-ideas-container.nav-container > :last-child {
    padding-bottom: 0;
} 

/*** STC-6117: 'Related Parts' carousel container ***/
/* STC-6227: [Object Page] Reset top/bottom padding for "Related Parts" carousel 
			- Rename the class
			- Extend the carousel block design edge to edge on the entire page
			- Reset margin and padding
*/
.related-parts-container {
	background: #FFFFFF;
	padding-top: 42px;
	padding-bottom: 0px;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	margin-bottom: 0;
	padding-left: calc(1.5rem + 1.25vw);
	padding-right: calc(1.5rem + 1.25vw);
}

/* STC-6227: [Related Parts carousel] Reset padding for the inline container */
/* STC-6255: [Related Parts carousel] Increase padding-bottom from 0px to 42px */
.related-parts-container .section-container {
	padding: 42px 0px 42px 0px;
}

.nav-container > :first-child {
	padding-top: 84px;
}

.nav-container > :last-child {
	padding-bottom: 84px;
}

.result-topics-container {
	padding-bottom: 0;

}
/* STC-6181: removed overflow property */
.result-artists-container {
	padding-top: 84px;
}

#scroll-top-btn {
	position: fixed;			/** for IE **/
	position: sticky;
	position: -webkit-sticky;
	right: 63px; 
	bottom: 43px;
	margin-bottom: 10px;
	text-align: right;
}

/* STC-6154: Hide the scroll to top button */
#scroll-top-btn.hidden-btn {
	display: none;
}

#scroll-top-btn a {
	font-size: 12px;
	line-height: 15px;
}

#scroll-top-btn .glyphicon {
	margin-left: 7px;
}

#stc-results .card-container {
	margin-bottom: 70px;
}

/********** Search input and filters **********/
/* STC-6181: font-family, specifed font size 18 px */
.search-container .input-control,
.input-control {
	width: 100%;
	border: 0;
	outline: 0;
	border-bottom: 2px solid #999999;
	/* padding: 16px 10px; */
	padding-left: 28px;
	padding-right: 225px;
	height: 73px;
	font-size: 18px;
	line-height: 23px;
	display: flex;
	align-items: center;
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
    background: #444444;
	font-family: 'Brut Regular';
	font-size: 18px;
}

/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
body:not(.firefox-css) .search-container .input-control,
body:not(.firefox-css) .input-control {
	backdrop-filter: blur(40px);
}

/* STC-add speciality to cancel the overridden from NGA source */
.search-container .input-control:focus ,
.input-control:focus {
	background-color: #00000033 !important;
}

/* STC-add speciality to cancel the overridden from NGA source */
div[id=stc-results] .search-container .input-control:focus ,
.input-control:focus {
	background-color: #444444 !important;
	outline: 0 !important;
}


.slick-arrow.slick-next {
	right: -25px;
}
.slick-arrow.slick-prev {
	left: -25px;
	
}

/* STC-5821: set the color of the 'Search in' label and chevron icon to black and white */
/* STC-6181: font-family changed, specify font size 18 px */
.search-dropdown-title .search-in-label {
	color: white;
	margin-right: 7px;
	font-family: "Brut Regular";
	font-size: 18px;
}

.search-dropdown-title md-icon.search-chevron {
	color: white;
  	font-size: 14px;
  	width: 14px;
  	height: 14px;
  	min-height: 14px;
  	min-width: 14px;
}

.search-dropdown-title.container-with-active-dropdown .search-in-label,
.search-dropdown-title.container-with-active-dropdown md-icon.search-chevron {
	color: black;
}


/********** Search icon **********/
.search-btn-container .search-icon {	
	font-style: normal;
	font-weight: 900;
	font-size: 30px;
	line-height: 34px;
}

.stc-chip .search-icon {
	font-style: normal;
	font-weight: 900;
	font-size: 18px;
	line-height: 21px;
	margin-left: 6px;

}

.simple-search-container .search-icon {
	color: #FFFFFF;
	font-weight: 900;
	font-size: 12px;
	line-height: 14px;	
	position: absolute; 
	/* STC-6262: Decrease the space from right */
	right: 14%;
}

/* STC-6119: Redesign the search-icon... */
/* STC-6180: Fix for the new class 'search-icon' */
.object-nav-back-stc .search-icon {
	color: #000000;
	font-style: normal;
	font-weight: 900;
	font-size: 13px;
	line-height: 150%;
	margin-right: 6px;
}
/********** Search icon end **********/

/********** Plus icon **********/
.add-filter-chip .plus-icon {
	font-style: normal;
	font-weight: 900;
	font-size: 10px;
	line-height: 11px;
	margin-left: 9px;
	margin-right: 9px;	
}


/********** Plus icon end **********/



/** change placeholder color: https://css-tricks.com/almanac/selectors/p/placeholder/ **/
input[type="text"].input-control::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].input-control::-moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].input-control:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].input-control:moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].simple-input-control::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].simple-input-control::-moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].simple-input-control:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.5);
}
input[type="text"].simple-input-control:moz-placeholder {
	color: rgba(255, 255, 255, 0.5);
}

.search-container {
	position: relative;
	padding-bottom: 18px;
	color: #FFFFFF;
}

.search-container .action-set {
    position: absolute;
    right: 0;
    top: 0;
}

.search-container .action-set .search-dropdown-title {
	position: relative;
	height: 73px;
	display: block;
	padding: 28px 23px;
	user-select: none;
	z-index: 3;
	font-weight: bold;
}

.search-dropdown-title:focus {
	outline: none;
}
/* STC-6181: added font-family, specified font size 18 px */
.search-dropdown-checklist {
	font-family: 'Brut Regular';
	font-size: 18px;
	text-transform: uppercase;
	float: left;
}

.search-dropdown-checklist .anchor {
	position: relative;
	cursor: pointer;
	display: inline-block;
	padding: 5px 50px 5px 10px;
}

.search-dropdown-checklist .anchor:after {
	position: absolute;
	content: "";
	border-left: 2px solid white;
	border-top: 2px solid white;
	padding: 5px;
	right: 15px;
	top: 35%;
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.search-dropdown-checklist .search-dropdown-title .fas {
	font-size: 14px;
}
/* STC-6181: right aligned the dropdown to search icon  */
.search-dropdown-checklist ul.items {
	text-transform: uppercase;
	position: absolute;
	padding: 2px;
	display: none;
	margin: 0;
	outline: 1px solid #ccc;
	width: max-content;
	background: #FFFFFF;
	color: #444444;
	z-index: -1;
	padding-bottom: 10px;
	right: 0px;
}

.search-dropdown-checklist ul.items.visible {
	display: block;
	z-index: 2;
}
/* STC-6181: standardized the font */
.search-dropdown-checklist ul.items li {
	font-family: "Brut Regular";
	font-weight: 700;
	list-style: none;
	padding: 10px 22.5px;
	margin-top: 6px;
}
/* STC-6181: align size with search-in */
.search-dropdown-checklist md-checkbox .md-label {
	font-size: 18px;
	color: #000000;
}

.search-dropdown-checklist ul.items li md-checkbox {
	margin-bottom: 0px;
}

.search-btn-container {
	float: left;
	height: 73px;
    width: 73px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-with-active-dropdown {
	background: #FFFFFF;
	color: #0077DD;
	font-family: "NGA Condensed Bold";
	font-weight: bold;
	border-top: 1px solid #ccc;
}

.filter-options-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 0px;
}

.filter-options-container .search-option-set {
	position: absolute;
	right: 10%;
}

.filter-options-container .search-option-set > span {
	padding-left: 12px;
}

.filter-options-container .filter-set {
	flex: none;
	order: 0;
	flex-grow: 0;
	/*margin: 0px 17px;*/
	padding-right: 17px;
}

.filter-options-container .add-filter {
	border: 1px solid #0077DD;
	box-sizing: border-box;
	border-radius: 23px;
	padding: 5px;
	color: #0077DD;
}

.add-filter-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	-webkit-flex-direction: row;
	-webkit-align-items: flex-start;
	-webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-align: flex-start;
}

.add-filter .filter-label {
	/* Inside Auto Layout */
	flex: none;
	order: 0;
	flex-grow: 0;
	margin: 0px 9px;
}

.add-filter .filter-icon {
	/* Inside Auto Layout */
	flex: none;
	order: 1;
	flex-grow: 0;
}

/* STC-6324,6325:[Landing/Search Result page] Update text style for 'remaining-filters-link'*/
.remaining-filters-link {
	line-height: 28px;
	vertical-align: top;
	display: inline-block;
	cursor: pointer;
	float: left;
	font-family: 'Brut Regular';
	font-style: normal;
	font-weight: bold;
	font-size: 14px;
	line-height: 18px;
	color: #000000 !important;
	margin-top: 7px;
	text-shadow: -1px 0px 0px #ffff, 1px 0px 0px #FFFFFF, 0px -1px 0px #FFFFFF, 0px 1px 0px #FFFFFF;
}

.search-filters-container .stc-chip {
	margin-right: 17px;
}

/* STC-6156: Implement "Including part" checkbox in Artist page */
.search-filters-container md-checkbox.md-primary .md-icon,
.search-filters-container md-checkbox.md-checked.md-primary .md-icon,
.object-container md-checkbox.md-checked.md-primary .md-icon {
	border: 1px solid #444444;
	box-sizing: border-box;
	border-radius: 2px;
	background-color: #FFFFFF;
}

/* STC-5821: change the color of the checkboxes' ticks to black and centre them */
/* STC-6156: Implement "Including part" checkbox in Artist page */
.search-filters-container md-checkbox.md-checked.md-primary .md-icon:after, 
.search-filters-container md-checkbox:not([disabled]).md-checked.md-primary .md-icon:after,
.object-container md-checkbox:not([disabled]).md-checked.md-primary .md-icon:after { 
	border-color: black;
	width: 6px;
    height: 10px;
    top: 2px;
    left: 6px;
}

.search-filters-container .add-filter-container md-checkbox.md-checked.md-primary .md-icon:after, 
.search-filters-container .add-filter-container md-checkbox:not([disabled]).md-checked.md-primary .md-icon:after { 
	border-color: black;
	width: 6px;
    height: 10px;
    top: 2px;
    left: 6px;
}

/* change the color of the checkbox's ripple to grey */
/* STC-6156: Implement "Including part" checkbox in Artist page */
.search-filters-container md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-ink-ripple, 
.search-filters-container md-checkbox:not([disabled]).md-primary.md-checked .md-ink-ripple,
.object-container md-checkbox:not([disabled]).md-primary.md-checked .md-ink-ripple {
	color: rgba(0,0,0,0.54);
}


/** Filters **/
/* STC-6181: added text-tranform */
.md-button.filter-add-btn {
	text-transform: uppercase;
	min-width: 66px;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.2);
	color: white;
	box-shadow: none;
}

.md-button.filter-add-btn.md-default-theme.md-raised:not([disabled]):hover, 
.md-button.filter-add-btn.md-raised:not([disabled]):hover {
	/* STC-6299: [Filter Panel] "Add +" action should be changed to white */
	background: #FFFFFF;
	color: #000000;
}

/* STC-6344: Disable the page underneath the filters panel */
.overlay-mask {	
    position: fixed;   
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    background: transparent;
}

/* STC-6344: Enable the inner scrolling within the filters panel */
.panel-scroll {
	overflow-x: hidden;
	overflow-y: scroll;
}

/* STC-6344: Display the filters panel in full page */
.full-panel {
	height: 100%;
}

.filters-panel {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	color: #444444;
	visibility: hidden;
	z-index: 20;
    opacity: 0;
    color: #FFFFFF;
    background: #444444;
}

/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
body:not(.firefox-css) .filters-panel {
	 backdrop-filter: blur(40px);
}

.filters-panel.active {
	visibility: visible;
	opacity: 1;
	-webkit-transition: all .3s cubic-bezier(.55,0,.55,.2);
	transition: all .3s cubic-bezier(.55,0,.55,.2);
	-webkit-transition-duration: .25s;
	transition-duration: .25s;
}
/* STC-6181: changed font */
.filters-panel .title {
	font-family: "Brut Condensed Bold";
	font-style: normal;
	font-weight: bold;
	font-size: 72px;
	line-height: 91px;
	margin-bottom: 10px;
}

.filters-panel .filter-close-btn {
	transform: scale(1.8);
}

.filters-panel .filter-close-btn > md-icon {
	color: #FFFFFF;
}

/* STC-6259: [Filters panel] Style the horizontal line */
.filters-panel-rule-line {
	border-bottom: 1px solid #FFFFFF;
	padding-left: calc(-50vw + 50%);
	padding-right: calc(-50vw + 50%);
	margin-top: 10px;
    margin-bottom: 30px;
}

.filter-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 0px;
	margin-right: 80px;
}

.filter-action {
	flex: none;
	order: 0;
	flex-grow: 0;
	margin-bottom: 20px;
	/* STC-6262: [Filters panel] Increase the width of the label container */
	width: 300px;
}

/* STC-6262: [Filters panel] Increase the width of the label container */
.filter-action .filter-label {
	width: 280px;
}

/* STC-6181: increased font size */
.filter-action-title {
	text-transform: uppercase;
	font-size:20px;
	font-weight: 700;
	flex: none;
	order: 0;
	flex-grow: 0;
	margin: 4px 0px;
}

.filter-add-btn.btn-small {
	min-height: 30px;
	line-height: 30px;
	min-width: 46px;
	font-size: 12px;
	display: none;
	vertical-align: top;
	margin: 0 0 0 8px;
}
/* STC-6181: increased font size to 12 */
.filter-add-btn.btn-small .btn-label {
	margin-right: 3px;
	margin-left: 3px;
	font-family: 'Brut Regular';
    font-size: 10px;
}
/* STC-6181: added new hover button */
.filter-add-btn.btn-small:hover {
	background: white !important;
	color: black !important;
}

.filter-add-btn .fa-plus {
	font-size: 8px;
	margin-right: 4px;
}

/* STC-6262: Change the display to flex for better alignment */
.filter-label-container {
	display: flex;
    justify-content: flex-start;
    align-items: center;
	min-height: 30px;
	line-height: 30px;
	/* STC-6575: Fix the alignments when focusing the filter labels */
	margin: 0 -10px 0 -1px;
	padding: 0 0 0 1px;
}

.menu-right-icon {
	display: none;
	right: 9px;
}

.filter-label-container  .menu-right-icon.fa-chevron-right {
	position: relative;
	font-size: 10px;
	margin-right: 7px;
}

.filter-label {
	width: 160px;
	display: inline-block;
	word-wrap: break-word;
}

/* STC-6262: [Filters panel] Increase the width of the label container */
.filter-label.top-filter-label {
	/* STC-6575: Fix the alignments when focusing the On-view/on-tour */
	width: 235px;
}

.filter-list-container {
	overflow: hidden;
	height: 450px;
	margin-left: -10px;
	padding-left: 10px;
}

/* STC-6262: [Filters panel] Only display the vertical scrollbar, and keep the horizontal scrollbar hidden */
.filter-list-container:hover {
	overflow-y: auto;
}

/* STC-6181: increased font size */
.filter-list-item {
	margin-bottom: 5px;
	font-size: 20px;
}

/* STC-6566: Focus outline is not matching the filter highlight */
.filter-list-item:focus {
	outline: #c6c6c6 solid 1.8px !important;
	/* STC-6575: Fix the alignments when focusing the filter labels */
	width: 296px;
}

.filter-list-item:hover .filter-label-container,
.filter-list-item.selected .filter-label-container {
	background: rgba(255, 255, 255, 0.2);
}

.filter-list-item:hover button.filter-add-btn,
.filter-list-item.selected button.filter-add-btn,
.filter-list-item:hover .menu-right-icon,
.filter-list-item.selected .menu-right-icon {
	display: inline-block;
}

/* STC-6262: [Filters panel] Change the display to inline-flex for better alignment */
.filter-list-item:hover .filter-label-container,
.filter-list-item.selected .filter-label-container {
    display: inline-flex;
}

.filter-list-item.disabled {
	pointer-events: none;
	opacity: 0.4;
}

.filter-container {
	padding-top: 3%;
	padding-bottom: 5%;
}

/* STC-6344: Adjust the alignment for the items in the filters panel */ 
#filter-column-list {
	display: flex;
	height: 550px;
}

/* STC-6181: increased the font size */ 	
.active-filter-container {
	font-size: 16px;
	display: flex;
    flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
	margin-bottom: 0px;
}

.active-filter-container .close-filter {
    width: 30px;
    height: 30px;
    position: relative;
    float: right;
}
.active-filter-container .close-filter:after {
    content: '';
    height: 30px;
    border-left: 2px solid #444444;
    position: absolute;
    transform: rotate(45deg);
    left: 15px;
}
.active-filter-container .close-filter:before {
    content: '';
    height: 30px;
    border-left: 2px solid #444444;
    position: absolute;
    transform: rotate(-45deg);
    left: 15px;
}

.active-filter-container:after {
	content: "";
	display: table;
	clear: both;
}
/* STC-6181: increased font size  */
.active-filters {
	line-height: 28px;
	font-size: 16px;
	font-weight: 700;
	margin-right: 30px;
	margin-top: 14px;
}


/* DATE FILTER DIRECTIVE */
.input-control.filter-input {
	font-size: 36px;
	background: rgba(0, 0, 0, 0.2);
	line-height: 46px;
	color: rgba(255, 255, 255, 0.5);
}

.input-control.filter-input.date-filter-input {
	width: 254px;
	padding-right: 1.5em;
}

.date-input-container.input-control.filter-input:focus {
	color: inherit;
	/* STC-6299: [Filter Panel] "Date" filters should be changed to white */
	border-bottom: 5px solid #FFFFFF;
	background: rgba(255, 255, 255, 0.35);
}


/* STC-add speciality to cancel the overridden from NGA source */
input[id=date-from]:focus, input[id=date-to]:focus {
	background-color: rgba(0, 0, 0, 0.2) !important;
	color: inherit;
	/* STC-6299: [Filter Panel] "Date" filters should be changed to white */
	border-bottom: 5px solid #FFFFFF;
	background: rgba(255, 255, 255, 0.35);
}

.filterdate-input-container {
	width: inherit;
	margin-bottom: 2em;
}

.date-input-container {
	position: relative;
	display: inline-block;
	width: inherit;
}

.date-input-container .action-set {
	position: absolute;
	right: 1em;
	top: 1em;
}

.date-dash-container {
	margin: 5em 1em 0;
}

.date-add-btn-container {
	margin: 4em 1em 0;
}

.date-add-btn-container .filter-add-btn {
	padding-left: 11px;
}

.date-add-btn-container .fa-plus {
	font-size: 10px;
	line-height: 11px;
	margin-left: 6px;
}

.date-title-label {
	margin-bottom: 20px;
}

.date-toggle {
	border-radius: 50px;
}

.date-toggle-label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	padding: 3px 5px;
	font-family: "NGA Condensed Bold";
}

.date-toggle.active {
	background: rgba(255, 255, 255, 0.5);
}

.date-toggle.active .date-toggle-label {
	color: #2E2E2E;
	font-weight: bold;
}

.input-control.filter-input:focus ~ div.action-set .date-toggle.active {
	background: #FFFFFF;
}

.input-control.filter-input:focus ~ div.action-set .date-toggle-label {
	color: #FFFFFF;
}

.input-control.filter-input:focus ~ div.action-set .date-toggle.active .date-toggle-label {
	color: #2E2E2E;
}


/* SELECT FILTER DIRECTIVE */
/* STC-6262: [Filters panel] Increase the width of the label container */
.filterselect-container {
	width: 350px;
	position: relative;
}

.filter-directive-container {
	margin-bottom: 70px;
}

/* STC-6262: [Filters panel] Increase the width of the label container */
.filterselect-container .filter-label {
	width: 250px;
}


/* PLACE FILTER DIRECTIVE */
.simple-search-container  .simple-input-control {
	width: 88%;
	border: 0;
	outline: 0;	
	border-bottom: 1px solid #FFFFFF;
	font-size: 14px;
	line-height: 18px;
	display: initial; 
	/* align-items: center; */
	font-weight: normal;
	font-style: normal;
	color: #FFFFFF;
	/*background: #444444;*/
	background: transparent;
	margin-bottom: 0rem; 
    padding: 0rem;
    border-radius: inherit;   
}

/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
body:not(.firefox-css) .simple-search-container .simple-input-control {
	backdrop-filter: blur(40px);
}

.simple-search-container .simple-input-control:focus {
	background-color: transparent !important;
	outline: none !important;
	border-bottom: 1px solid #FFFFFF !important;
} 

.simple-search-container {
	margin-bottom: 4px;
}
/* STC-6181: increased font size to 12 */
.alphabet-filter-container {
	position: absolute;
	right: 10px;
	font-size: 12px;
	font-weight: 100;
	padding-top: 3px;
}

.alphabet-container {
	margin: 2px;
}

.place-region-container,
.place-country-container,
.place-city-container {
	width: 280px;
	position: relative;
}

.place-region-container,
.place-country-container {
	margin-right: 80px;
}

.place-region-container {
	width: 250px;
}

.country-panel {
	width: 300px;
	/*height: 500px;
	overflow: hidden;*/
	position: relative;
	padding-left: 10px;
}


/** Filter Themes **/

.filter-light-theme .input-control {
	background: #FAFAFA;
	color: #444444;
	border-bottom: 5px solid #0077DD;
}

.filter-light-theme .simple-input-control {
	color: #444444;
	border-bottom: 2px solid #444444;
}

.filter-light-theme input[type="text"].input-control::-webkit-input-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].input-control::-moz-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].input-control:-ms-input-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].input-control:moz-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].simple-input-control::-webkit-input-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].simple-input-control::-moz-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].simple-input-control:-ms-input-placeholder {
	color: #444444;
}
.filter-light-theme input[type="text"].simple-input-control:moz-placeholder {
	color: #444444;
}

.filter-light-theme .search-filters-container md-checkbox.md-default-theme:not([disabled]).md-primary:not(.md-checked) .md-icon, 
.filter-light-theme .search-filters-container md-checkbox:not([disabled]).md-primary:not(.md-checked) .md-icon {
	border-color: rgba(0,0,0,0.54);
}

.filter-light-theme .search-container {
	color: inherit;
}

.filter-light-theme .search-dropdown-checklist ul.items,
.filter-light-theme .filters-panel {
	background: rgba(243, 243, 243, 0.7);
	color: #444444;
}

/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
body:not(.firefox-css) .filter-light-theme .search-dropdown-checklist ul.items,
body:not(.firefox-css) .filter-light-theme .filters-panel  {
	backdrop-filter: blur(70px);	/* Note: backdrop-filter has minimal browser support */
}

.filter-light-theme .filters-panel .filter-close-btn > md-icon {
	color: #444444;
}

.filter-light-theme .input-control.filter-input.date-filter-input {
	background: rgba(0, 0, 0, 0.2);
	border-bottom: 2px solid #444444;
}

.filter-light-theme .input-control.filter-input.date-filter-input:focus {
	background: #FFFFFF;
	border-bottom: 5px solid #0077DD;
}

.filter-light-theme .date-toggle-label {
	color: #FFFFFF;
}

.filter-light-theme .input-control.filter-input:focus ~ div.action-set .date-toggle.active {
	background: rgba(0, 0, 0, 0.2);
}

.filter-light-theme .input-control.filter-input:focus ~ div.action-set .date-toggle-label {
	color: #2E2E2E;
}

.filter-light-theme .filter-list-item:hover .filter-label-container,
.filter-light-theme .filter-list-item.selected .filter-label-container {
	background: #cfcfcf;
}

.filter-light-theme .md-button.filter-add-btn {
	color: rgb(33,33,33);
	background-color: rgb(250,250,250);
}


.filter-landing-theme .search-container .action-set .search-dropdown-title {
	font-size: 14px;
	line-height: 18px;
}

.filter-landing-theme .search-dropdown-checklist .anchor:after {
	border-left: 2px solid #0077DD;
	border-top: 2px solid #0077DD;
}

.filter-landing-theme .search-dropdown-checklist ul.items {
	background: #FFFFFF;
	color: #444444;
}

.filter-landing-theme .filter-options-container .add-filter {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}

.filter-landing-theme .filters-panel {
	background: #444444;
	color: #FFFFFF;
}

/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
body:not(.firefox-css) .filter-landing-theme .filters-panel {
	 backdrop-filter: none;
}

.filter-landing-theme .search-filters-container .stc-chip.add-filter-chip {
	border: 1px solid #FFFFFF;
	color: #FFFFFF;	
}


.filter-landing-theme .search-filters-container .stc-chip.add-filter-chip.no-keyword {
	border: 1px solid #bbbbbb;
	color: #bbbbbb;
}

.filter-landing-theme .search-filters-container .add-filter-container md-checkbox.md-primary .md-icon,
.filter-landing-theme .search-filters-container .add-filter-container md-checkbox.md-checked.md-primary .md-icon {
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	border-radius: 2px;
	background-color: transparent;
}

.filter-landing-theme .search-filters-container .add-filter-container md-checkbox.md-checked.md-primary .md-icon:after, 
.filter-landing-theme .search-filters-container .add-filter-container md-checkbox:not([disabled]).md-checked.md-primary .md-icon:after { 
	border-color: #FFFFFF;
}

.filter-landing-theme .input-control {
	background: rgba(0, 0, 0, 0.2);
	border-bottom: 2px solid #FFFFFF;
}

/* STC-5821: change the 'Search in' label and icon to black and white color */
.filter-landing-theme .container-with-no-user-input,
.filter-landing-theme .container-with-active-dropdown {
	background: #FFFFFF;
	color: black;
	font-weight: bold;
	border-top: none;
}

.filter-landing-theme .search-dropdown-title .search-in-label,
.filter-landing-theme .search-dropdown-title md-icon.search-chevron {
	color: black;
}

.filter-landing-theme .search-dropdown-title:not(.container-with-no-user-input):not(.container-with-active-dropdown) .search-in-label,
.filter-landing-theme .search-dropdown-title:not(.container-with-no-user-input):not(.container-with-active-dropdown) md-icon.search-chevron {
  	color: white;
}

/********** Object page **********/
/* STC-6247: Add outer container for alignment */
.object-details-block {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* STC-6119: PART-ONE - page-section line to separate the section and carousel */
.page-section-rule-line {
	/* STC-6264, 6265, 6266, 6267: Change the line weight */
	border-bottom: 1px solid #000000;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}
/* STC-6119: PART-ONE END */

/* STC-6247 & 6257: [Object page, Artist page] Style the horizontal line */
.object-details-block .page-section-rule-line,
.artist-details-block .page-section-rule-line {
	flex: 1 1 100%;
}

.object-info,
.object-credit {
	padding-bottom: 5em;
}

/* STC-6306: Adjust the paddings */
.object-narrative,
.object-discover-art {
	padding-top: 5em;	
}

/* STC-6292: Adjust the width of the narratives */
.object-narrative {
	display: flex;
	flex-direction: column;
}

/* STC-6247: Define the size of the object info container  */
.object-info {
	flex: 1 1 calc(100% / 3 * 2);
}

/* STC-6119: PART-ONE - Adjusting the object-data alignment */
/* STC-6228: Adjust padding between Artist Name, birthyear/place, Object title */
.object-data {
	/* padding-bottom: 2em; */
	padding-bottom: 6.8em;
	padding-top: 1em;
	flex: 1 1 100%;
}

.object-info {
	padding-top: 2em;
}

/* STC-6119: PART-ONE - Adjusting the object-container alignment */
/* STC-6228: Adjust padding between Artist Name, birthyear/place, Object title */
/* STC-6247: Set the size and order for the artist section */
.object-nav {
	display: flex;
	flex-wrap: wrap;
	padding-top: 0px;
	flex: 1 1 calc(100% / 3 * 2);
	order: -1;
}

/* STC-6257: [Artist page] Set the size for the artist section */
.artist-details-block .object-nav {
	flex: 1 1 100%;
}

/* STC-6218 and STC-6215: [Object Page] Modify "Search the Collection" alignments */
/* STC-6247: Align 'Search the collection' section */
.object-nav-back-stc,
.object-nav-back-search {
	padding-bottom: 23px;
	margin-top: 1ex;
	width: 70%;
}

/* STC-6119: PART-ONE - Adjusting the font-size */
/* STC-6218 and STC-6215: [Object Page] Separate these into two classes for redesign purpose */
.object-nav-back-search .back-label,
.object-nav-back-stc .back-label {
	font-size: 1.8rem;
}

/* STC-6218 and STC-6215: [Object Page] Separate these into two classes for redesign purpose */
.object-nav-back-search .back-label:hover,
.object-nav-back-stc .back-label:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* STC-6218 and STC-6215: [Object Page] Rename "Back to your search" class icon */
.object-nav-back-search .fa-chevron-left {
	font-size: 10px;
	line-height: 150%;
	margin-right: 12px;
}

/* STC-6119: PART ONE - [Object Page] Adjusting mainArtist alignment */
/* STC-6247: Set the size for the main artist section */
.object-nav-mainArtist {
	flex: 1 1 calc(100% / 3 * 2);
}

/* STC-6119: PART ONE - Moving "goBack()" into object container section */
/* STC-6247: Align 'Search the collection' section */
.object-nav-vra-items {
	flex: 1 1 calc(100% / 3);
	display: flex;
	justify-content: flex-end;
}

/* STC-6323: Stop the main artist name from breaking into new lines for various screen widths */
.main-artist-text {
	word-break: normal;
}

.object-nav-vra-items .fa-link {
	font-size: 11px;
	line-height: 150%;
	margin-left: 5px;
}

/* STC-6119: PART ONE - Adjusting Artist name padding */
/* STC-6169: Fixing the Artist Page formatting error (affected by Object Page) */
/* STC-6228: Adjust padding between Artist Name, birthyear/place, Object title */
/* STC-6247: Align the artist section */
.object-nav-artist {
	flex: 1 1 calc(100% / 3 * 2);
	padding-bottom: 5px;
}

/* STC-6222: Add and modify 'On View' / 'On Tour' indicator in the Image Carousel */
.on-view-on-tour-indicator {
	position: absolute;
	padding: 28px 0px 0px 50px;
}
/* STC-6546: Change the Indicator from button to avoid having focus outline action */
.rec-on-view-on-tour-indicator {
	font-family: 'Brut Regular';
	font-size: 18px;
	text-transform: uppercase;
	background-color: #989898;
	color: #FFFFFF;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: none;
	pointer-events: none;
	z-index: 1;
	margin: 0;
	text-align: center;
	height: 25px;
	width: 85px;
}
.rec-on-view-on-tour-indicator > span {
	padding: 18px 2px;
}
/* STC-6222: 'On View' / 'On Tour' indicator: END */
    
/**************** 	Artist Page Design 	***********************/
/* STC-6257: Add outer container for alignment */
.artist-details-block {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

/* STC-6257: Add outer container for the 'Search the collection' and copy url section */
.action-details-block {
	display: flex;
    flex-direction: column;
    flex: 1 1 calc(100% / 3);
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 40px;
}

/* STC-6257: Style the copy url section */
.action-info {
	padding-left: 125px;
}

/* STC-6257: Style the including part checkbox section */
.including-parts-div {
	padding-left: 95px;
}


/* STC-6180: Redesign Artist page */
/* STC-6257: Set the size for the artist details container */
.artist-nav {
	display: flex;
	flex-wrap: wrap;
	padding-top: 2rem;
	padding-bottom: 40px;
	flex: 1 1 calc(100% / 3 * 2);
}

/* Adapted from: .object-nav-artist  */
/* STC-6256: Increase padding to 22px above artists name and below artists birth/death year  */
.artist-page-nav-artist {
	flex: 1 1 70%;
	padding-top: 22px;
	padding-bottom: 22px;
}

/* STC-6256: Add new class for reseting Artist Name padding  */
.artist-page-nav-artist .main-artist-name {
	line-height: 70px;
	padding-bottom: 5px;
}

/* STC-6256: Add new class for reseting Artist Birth year padding  */
.artist-page-nav-artist .main-artist-birth p {
	margin: 0 0 0;
}

/* Adapted from: .object-info-wrapper  */
/* STC-6258: Remove padding bottom to align with "Search the Collection" link  */
.artist-info-wrapper {
	padding-bottom: 30px;
    margin-right: 30px;
}

/*STC-6338: [Artist Page]: Add new class for reseting 'Place of birth' font-size */
.artist-info-wrapper .object-info-value {
	font-family: "Brut Regular";
	font-size: 20px;
}

/* STC-6256: Style the 'Search the collection' and copy url section  */
.action-details-wrapper {
	padding-bottom: 30px;
}

/* Adapted from: .object-nav-vra-items  */
.artist-nav-vra-items {
	font-family: "Brut Regular";
	font-size: 1.8rem;
}

.artist-nav-back-stc {
	padding-left: 100px;
}

.artist-nav-back-stc .search-icon {
	color: #000000;
	font-style: normal;
	font-weight: 900;
	font-size: 13px;
	line-height: 150%;
	margin-right: 6px;
}

.artist-nav-back-stc .back-label {
	font-family: "Brut Regular";
	font-size: 1.8rem;
}

.artist-nav-back-stc .back-label:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* Artist Page: END */

/* Artist section */
/* STC-6119: PART ONE - Adjusting Artist name font-size */
/* STC-6180: Add line-height to set the Name padding */
.main-artist-name {
	font-family: "Brut Condensed Bold";
	font-weight: bold;
	font-size: 8rem;
	margin: 0px 0px 0px -3px;
	line-height: 100%;
	padding-bottom: 5px;
}

/* STC-6119: PART ONE - Adjusting Artist place font-size and color */
.main-artist-place {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 20px;
	line-height: 30px;
}

/* STC-6119: PART ONE - Adjusting Artist Birth date font-size and color */
.main-artist-birth {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 2rem;
	line-height: 25px;
}

/* STC-6119: Reset the padding... */
/* STC-6228: Adjust padding between Artist Name, birthyear/place, Object title */
.artist-container {
	padding-bottom: 1em;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	/* STC-6253: Fix the container-box width */
	flex: 1 1 100%;
	padding-top: 20px;
}

/* STC-6119: Reset the alignments... */
/* STC-6228: Adjust padding between Artist Name, birthyear/place, Object title */
/* STC-6253: [Object Page] Increase padding for various contributing artist names */
/* STC-6311: Fix various alignment issues for artist names */
.artist-inner-container {
	padding-bottom: 3ex;
	flex: 0 1 calc(100% / 3);
}

/* 
 * Notes: Items in different columns have different alignment. Set them accordingly.
 * Use same settings for all items in 3rd column: 'Search the collection' section, copy url section, every 3rd item in artist and object details block, etc
 *
 * Reference: https://css-tricks.com/almanac/selectors/n/nth-child/ 
 */
 
/* 1st column - Select every 3rd list item starting with first */
.artist-container > div:nth-child(3n - 2) { 
	padding-right: 8ex;
}

/* 2nd column - Select every 3rd list item starting with 2nd */
.artist-container > div:nth-child(3n - 1) { 
	padding-left: 8ex;
}

/* 3rd column - Select every 3rd child item */
.artist-container > div:nth-child(3n) { 
	padding-left: 32px;
	display: flex;
	justify-content: flex-end;
}

.artist-container > div:nth-child(3n) .artist-inner-wrapper { 
	width: 70%;
}

/***	 End of STC-6311 	***/

/* STC-6119: Reset font size and line-height... */
.artist-name,
.artist-role,
.artist-birth {
	font-size: 2rem;
	line-height: 120%;
}

.artist-name {
	font-weight: bold;
} 

/* STC-6119: Reset color... */
.artist-birth {
	color: #000000;
}

/**************	 Narrative section 	****************/

/* STC-6294: Implement accordion for narratives */
.accordion-container {
	width: calc(100% / 3 * 2);
}

.accordion-container .panel-group .panel-heading {
	padding: 20px 0;
}

.accordion-container .panel {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.accordion-container .panel-body {
	padding: 0;
}

.accordion-container .panel-group .panel-heading + .panel-collapse > .panel-body, 
.accordion-container .panel-group .panel-heading + .panel-collapse > .list-group {
	border: none;
}

.accordion-container .panel-title a {
	all: unset;	
}

.accordion-container .panel-title a:hover,
.accordion-container .panel-title a:focus {
	opacity: 1 !important;	
}

.accordion-container .panel-title [role="button"] {
	cursor: default !important;
}

.accordion-container .icon-container {
	flex: 1 1 10%;
}

.accordion-title-icon {
	color: black;
	transform: scale(2.5);
}

span[uib-accordion-header] {
	display: flex;
	align-items: baseline;
}

/* STC-6296: Limit the number of text lines to be displayed */
.accordion-container .text-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* STC-6337: Set the max-height for the narrative content to truncate long paragraphs */
.accordion-container .height-limit-clamp {
	overflow: hidden;
	max-height: 350px;
}

/* Set animation delay for smoother transition */
.accordion-container .fade-text {
	opacity: 0;
	animation: fadeIn 0.2s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}

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

/* STC-6205: Remove 'narrative-container' as no longer needed */

.narrative-list {
	line-height: 28px;
	margin-left: -6px;
	list-style: none;
}

/* STC-6205: Removing the Old Narrative-title classes as they are no longer needed */

/* STC-6205: adapted from 'carousel-view-all-btn' */
/* STC-6205: "CONTINUE READING" & "HIDE" buttons */
.continue-hide-btn {
	display: inline-block;
	vertical-align: baseline;
	margin: 0;
	padding: 1.15rem;
	padding-left: 2rem;
	padding-right: 2rem;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 1.2;
	color: #000000;
	text-align: center;
	text-transform: uppercase;
	border-style: solid;
	border-width: 0.1rem;
	border-radius: 0.5rem;
	border-color: #000000;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* STC-6205: Modify for Narrative Read-more container */
.narrative-readmore-container {
	bottom: 0px;
	width: 100%;
	margin: 30px 0;
	text-align: left;
	line-height: 18px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}

.narrative-readmore-container .load-more-btn {
	font-weight: bold;
	font-size: 14px;
	position: absolute;
	bottom: -30px;
	left: 0;
	right: 0;
}

/* STC-5821: temporarily not used for chevron icon not registered via Angular */
.narrative-readmore-container .fa-chevron-down,
.narrative-readmore-container .fa-chevron-up {
	font-style: normal;
	font-weight: 900;
	font-size: 10px;
	line-height: 175%;
	margin-left: 8px;
}

/* STC-5821: temporarily use chevron icon registered via Angular */
.narrative-readmore-container .read-more-chevron {
	line-height: 175%;
	margin-left: 8px;
	color: black;
	font-size: 10px;
  	width: 10px;
  	height: 10px;
  	min-height: 10px;
  	min-width: 10px;
}

.narrative-readmore-container.show-less {
	background: none;
	height: auto;
}

/* STC-6119: Reset all the property for both sections */
/* STC-6114 & 6115: Add title for 'Art & ideas' block */
.narrative-big-title,
.art-and-ideas-big-title,
.discover-art-big-title {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 3.2rem;
	text-transform: uppercase;
	line-height: 120%;
	color: #000000;
	margin-bottom: 1.5rem;
}

.narrative-type {
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 120%;
	color: #999999;
}

.narrative-title {
	font-family: "Brut Bold";
	font-size: 32px;
	color: #000000;
	flex: 1 1 90%;
}

.narr-icon-plus .fa-thin fa-plus {
	position: absolute;
	top: 20%;
	margin-left: 10px;
	color: black;
    transition: all .3s linear;
}

.narr-icon-plus:active .fa-plus {
    transform: rotate(45deg);
}
/* STC-6205: Modify the Narrative title: END */

/* STC-6560: Fix the focus outline when using TAB key for Narrative title */
a:focus .narrative-title {
	outline: #444444 solid 2px !important;
}

.narrative-content {
	font-family: "Brut Regular";
	line-height: 24.5px;
	font-size: 20px;
	/* STC-6119: Reset alignments and change font color */
	color: #000000;
	display: inline-block;
	padding-bottom: 30px;
}

/** STC-6090: Override the "font[Attributes Style]" in Narratives paragraphs
 *	- E.g. IRN 178728
 */
.narrative-content font {
	font-family: "Brut Regular" !important;
	line-height: 24.5px !important;
	font-size: 20px !important;
}

/** STC-6090: Override the <span style> in Narratives paragraphs
 *	- E.g. IRN 148088
 *	Reference: https://css-tricks.com/override-inline-styles-with-css/
 */
 /* STC-6294: Only style the span within the narratives */
.narrative-content span[style] {
	font-family: "Brut Regular" !important;
	line-height: 24.5px !important;
	font-size: 20px !important;
}

.narrative-content blockquote {
	/* STC-6090: Override the blockquote section with 'Brut (regular)' font */
	/* STC-6111: Adjust the margins left and right to the blockquote section */
	font-family: "Brut Regular";
	margin: 0px 10px 0px 50px;
	line-height: 24.5px;
	font-size: 20px !important;
}


/* STC-6090: the continuous blockquote section, set the 'Brut (regular)' font */
blockquote, blockquote p {
    font-family: "Brut Regular";
    text-align: center;
	font-size: 20px !important;
}
/********************* Narrative Content: END ************************/


/* Information section */
/* STC-6119: PART-ONE - Adjusting left col width */
.object-info-left-col {
	flex: 1 1 calc(100% / 3);
	/* STC-6218: Object details containers should be to design spec */
	padding-right: 8ex;	
}

/* STC-6119: PART-ONE - adding middle col width */
.object-info-middle-col {
	flex: 1 1 calc(100% / 3);
	/* STC-6219: Centre column text of 'object details' and 'discover art' sections should be aligned */
	padding-left: 8ex;
}

/* STC-6119: PART-ONE - Adjusting right col width */
.object-info-right-col {
	/* STC-6218: Object details containers should be to design spec */
	flex: 1 1 calc(100% / 3);
	display: flex;
	justify-content: flex-end;
	padding-right: -15px;
	padding-left: 32px;
	padding-top: 2em;
	padding-bottom: 5em;
}

/* STC-6180: Reset font in specific container */
.object-info-right-col .object-info-value {
	font-family: "Brut Regular";
	font-size: 1.8rem;
}

.object-info-wrapper {
	padding-bottom: 30px;
	margin-right: 30px;
}

/* STC-6247: Style the copy url section */
.copy-url-wrapper {
	margin-right: 0;
	width: 70%;
}

/* STC-6531: New "Request Usage" button on an Object page */
.request-usage-btn-container {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: 30px;
}
.request-usage-btn {
	display: inline-block;
	vertical-align: baseline;
	margin: 0;
	padding: 1.15rem;
	padding-left: 2rem;
	padding-right: 2rem;
	font-size: 16px;
	font-weight: normal;
	line-height: 1.2;
	color: #000000;
	text-align: center;
	text-transform: uppercase;
	border-style: solid;
	border-width: 0.1rem;
	border-radius: 8px;
	border-color: #000000;
	background-color: transparent;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

/* STC-6119: PART-ONE - Change font-size */
.object-info-label {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 2rem;
	line-height: 120%;
}

/* STC-6119: PART-ONE - Change font-size */
/* STC-6216: Object info font should be 20px */
.object-info-value {
	font-size: 2rem;
	line-height: 120%;
	font-weight: 400;
	font-family: "Brut Regular";
}

.object-info-value.provenance-data {
	white-space: pre-wrap;
}

/* STC-6119: PART-ONE - Change font-size, remove color and adjust padding */
.object-info-big-title {
	font-family: "Brut Condensed Bold";
	font-weight: bold;
	font-size: 6rem;
	line-height: 100%;
	padding-bottom: 5px;
	margin-left: -3px;
	width: 85%;
}
.object-info-container {
	width: 90%;
}
/* STC-6119: PART-ONE - Change font-size and style */
.object-info-big-date {
	font-family: "Brut Bold";
	font-weight: bold;
	font-size: 2rem;
	line-height: 30px;
}

/* Credit statement section */
.object-credit {
	font-size: 10px;
}

/* Image Carousel section */
.object-carousel {
	background: #F2F2F3;
	/* STC-6225: [Object Page] Tweak the margin as Artists Name should always be
	partially displayed on entire sreen when the page is open */
	margin-bottom: 1.8em;
	position: relative;
}

.object-carousel .slick-prev.carousel-arrow-btn {
	top: auto;
	left: 40px;
	bottom: 39px;
}

.object-carousel .slick-next.carousel-arrow-btn {
	top: auto;
	right: 40px;
	bottom: 39px;
}

.object-carousel .slick-track {
	display: flex;
	align-items: center;
}

/* STC-6313: [Object Page]: Resize the image padding */
.object-carousel .slick-track .slick-slide {
	padding: 0 8ex 0 8ex;
}

.object-carousel md-progress-circular {
	position: absolute;
	top: 50%;
	left: 50%;
}

.image-wrapper {
	/* STC-6313: [Object Page]: Resize the image padding */
	padding: 2em 2em;
}

.image-wrapper:focus {
	outline: none;
}

.object-image {
	display: block;
	min-height: 50px;
	/* STC-6313: Consistent the image size when viewing in different screen sizes */
	max-height: calc(100vh - 21rem);
	width: 100%;
}

#object-slick {
	opacity: 0;
}

#object-slick.show {
	opacity: 1;
}

/********** Discover Art **********/

.object-discover-art-container {
	flex: 1 1 100%;
}

/* STC-6119: Redesign the discover art */
.object-discover-art-content {
	width: 100%;
	padding-top: 2rem;
	display: flex;
	flex-wrap: wrap;
}

/* STC-6248: Modify 'Discover Art' Columns */
.object-discover-art-content > div:first-child { 
	flex: 0 1 calc(100% / 3);
	padding-right: 8ex;
}

/* 2nd column */
.object-discover-art-content > div:nth-child(2) { 
	flex: 0 1 calc(100% / 3);
	padding-left: 8ex;
}

.object-discover-art-thesaurus .object-info-value {
	font-size: 1.6rem;
}

/* 3rd column */
.object-discover-art-content > div:nth-child(3n) {
	flex: 1 1 calc(100% / 3);
	display: flex;
	justify-content: flex-end;
	padding-left: 32px;
}

/* 4th column - wrapped to next row */
.object-discover-art-content > div:nth-child(4) {
	width: calc(100% / 3 * 2);
	padding-top: 45px;
}

/* child of 3rd column */
.discover-art-inner-wrapper,
.object-discover-art-content > div:nth-child(3n) > div:first-child {
	width: 70%
}


/********** Discover Art **********/

/********** Responsive **********/

@media (min-width: 768px) {
	.navbar-toggle.header-menu-btn {
    	display: none;
	}
}

@media (max-width: 767px) {
	.header-menubar-container .header-submenu-container {
		position: relative;
		top: 10px;
		margin: 0 -15px;
		box-shadow: none;
	}
	
	.header-navbar-collapse {
		margin-left: -30px;
		margin-right: -30px;
	}
}

@media (min-width: 930px) {
	.navbar-collapse {
		width: auto;
		border-top: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.navbar-collapse.collapse {
		display: block !important;
		height: auto !important;
		padding-bottom: 0;
		overflow: visible !important;
	}
}

/* STC-6363: [All Views/Devices: Object Page] 'Left' and 'Right' carousel icons should be responsive, 
so that it is never positioned over an object image */
@media screen and (max-width: 1100px) {
	.object-carousel .slick-prev.carousel-arrow-btn,
	.object-carousel .slick-next.carousel-arrow-btn {
		bottom: -8px;
		width: 26px;
		height: 26px;
		font-size: 16px;
	}
	.object-carousel .slick-prev .fa-chevron-left,
	.object-carousel .slick-next .fa-chevron-right {
		font-size: 16px;
		margin-bottom: 2px;
	}

	/* STC-6379: [Various display sizes: Landing Page] Reset 'landing-page-text' line-height */
	.landing-search .content {
		line-height: 35px;
	}

	/* STC-6382: Fixed for long filter tokens break the page display */
	.active-filter-container {
		display: block;
	}
	.active-filter-container .ellipsis {
		word-wrap: break-word;
    	white-space: normal;
		height: auto;
	}
	.active-filters {
		line-height: 2ex;
		margin-bottom: 5ex;
		white-space: nowrap;
	}
	.filter-top-buttons {
		align-items: flex-start;
		display: flex;
		position: absolute;
		padding-top: 4ex;
		top: -1px;
		right: calc(1.5rem + 1.25vw);
	}	
}

/* STC-6322: [Object Page] Reposition 'On View' indicator at break point ≤1000px */
@media screen and (max-width: 1000px) {
	.on-view-on-tour-indicator {
		padding: 4.5ex 0px 0px 15px; /* set to 15px to consistent different image-sizes */
	}
	.md-button.on-view-on-tour-btn {
		font-size: 16px;
		padding: 0 5px;
		min-height: 2ex;
		min-width: 10ex;
		line-height: 25px;
	}
	/* STC-6382: Reset 'Cancel' and 'Apply' actions position */
	.filter-top-buttons {
		padding-top: 3ex;
	}	
}

/* STC-6344: Display the filters panel in full page */
@media screen and (max-width: 992px), 
       screen and (max-height: 768px) {
	.panel-scroll {
	 	height: 100%;
	}
}

@media screen and (max-width: 992px) {
	/* Footer */
	.footer-row {
		padding: 15px;
	}
	
	.footer-column {
		width: 100%;
	}
	
	/* Landing Search */
	.landing-search .new-updates .link {
		width: 100%;
	}
	
	/* STC-6328: Add new class to avoid stacking the 'View All' action */
	.ngacdl-flex-row-container:not(.row-display) {
		flex-direction: column;
	}
	
	.ngacdl-flex-column-container {
		flex-direction: row;
	}
	
	/* ARTIST IN THIS SEARCH */
	/* STC-6378: [Various display sizes: Search Results Page] Display issues for "Topics" and "Artists in this search" blocks */
	#resultArtists .ngacdl-flex-row-container,
	#resultArtists .ngacdl-flex-row-container .card-actions {
		display: inline-block;
	}

	/* Filters panel */
	
	/* STC-6344: Stack the filter lists vertically */
	#filter-column-list {
		flex-direction: column;
		height: auto;
	}	
	
	/* STC-6344: Increase the width of the filter label */
	.filterselect-container .filter-label {
		width: 100%;
	}
	
	/********** Landing page **********/
	
	.landing-search-container {
		width: 100%;
	}
	
	/* Filters */
	
	.filter-directive-container {
		width: 100%;
		padding-top: 30px;
	}
	
	/* STC-6262: [Filters panel] Increase the width for the search bar */	
	.simple-search-container .simple-input-control {
		width: 95%;
	}
	
	/* STC-6262: [Filters panel] Decrease the space from right for the search icon */	
	.simple-search-container .search-icon {
		right: 6%;
	}
	
	/* STC-6262: [Filters panel] Adjust the width of the label container */	
	.filterselect-container .filter-label-container {
		width: 92%;
	}
	
	.place-region-container,
	.place-country-container,
	.place-city-container,
	.filterselect-container {
		width: 100%;
	}
	
	/* Date filter directive */
	.ngacdl-flex-row-container.filterdate-container {
		align-items: flex-end;
		width: 100%;
	}
	
	.filterdate-container .input-control.filter-input.date-filter-input {
		width: 100%;
	}
	
	.filterdate-container .date-input-container .action-set {
		top: 2em;
	}
	
	.filterdate-container .date-dash-container {
		display: none;
	}
	
	.filterdate-container .date-add-btn-container {
		margin: 1em -10px 3em;
	}
	
	/********** Object page **********/
	
	/* STC-6322: [Object Page] Reposition 'On View' indicator at break point ≤900px */
	.on-view-on-tour-indicator {
		padding: 5px 0px 0px 25px; /* STC-6372,6373 - reset padding-top */
	}
	.md-button.on-view-on-tour-btn {
		font-size: 15px;
		padding: 0 5px;
		min-height: 2ex;
		min-width: 5ex;
		line-height: 22px;
	}

	/* STC-6311: Adjust alignment of artist names in smaller screen width */
	.artist-inner-container {
		flex: 0 1 50%;
	}
	
	.artist-container > div:nth-child(3n - 2) { 
		padding-right: 0;
	}
	
	.artist-container > div:nth-child(3n - 1) { 
		padding-left: 0;
	}
	
	.artist-container > div:nth-child(3n) { 
		padding-left: 0;
		display: flex;
		justify-content: flex-start;
	}
	
	.artist-container > div:nth-child(3n) .artist-inner-wrapper { 
		width: 100%;
	}
	
	/***	 End of STC-6311 	***/

	
	/* STC-6247: Change flex direction for smaller screen width */
	.object-details-block {
		display: flex;
		flex-direction: column;
	}
	
	.object-nav {
		flex-direction: row;
	}
	
	/* STC-6218 and STC-6215: Rename both classes for redesign purpose */
	.object-nav-back-search,
	.object-nav-back-stc {
		flex: 1 1 50%;
		/* STC-6247: Realign the 'Search the collection' section */
		text-align: left;
		margin-top: 0;
	}
	
	.object-nav-vra-items {
		flex: 1 1 50%;
		/* STC-6247: Set the order for the 'Search the collection' section so that it appears at the bottom for small screen width */
		order: 99;
	}
	
	.object-nav-artist {
		flex: 1 1 100%;
	}
	
	/* STC-6256: Add new class for reseting Artist Name padding  */
	.artist-page-nav-artist {
		flex: 1 1 100%;
	}
	
	/* STC-6247: Style the object details section for smaller screen width */
	.object-info {
		flex: 1 1 100%;
		padding-bottom: 0;
	}

	.object-info-left-col,
	/* STC-6275: Fixing misaligned object-details at the ≤900px break point */
	.object-info-middle-col,
	.object-info-right-col,
	.narrative-content,
	.object-discover-art-container {
		width: 100%;
	}
	
	/* STC-6275: Fixing misaligned object-details at the ≤900px break point */
	.object-info-middle-col,
	.object-info-right-col {
		padding-left: 0;
	}
	
	/* STC-6247: Style the copy url section for smaller screen width */
	.object-info-right-col {
	    justify-content: flex-start;
	    order: 100;
    	flex: 1 1 100%;
		padding-top: 0;
		padding-bottom: 0;	
	}

	/* STC-6275: Fixing misaligned object-details at the ≤900px break point */
	.object-discover-art-col-four {
		width: calc(100% / 3);
		order: 4;
		padding-left: 9ex;
		padding-right: 0;
	}
	
	/* STC-6247: Adjust padding for object title */
	.object-data {
		padding-bottom: 3em;
	}
	
	.accordion-container {
		width: 100%
	}
	
	/* STC-6248: Adjust alignment of discover art block in smaller screen width */
	
	.object-discover-art-content {
		flex-direction: column;
		flex: 1 1 100%;
	}
	
	.object-discover-art-content > div:first-child { 
		flex: 1 1 100%;
		padding-right: 0;
		padding-bottom: 30px;
	}
	
	.object-discover-art-content > div:nth-child(2) { 
		flex: 1 1 100%;
		padding-left: 0;
		padding-bottom: 30px;
	}
	
	/* 3rd column*/
	.object-discover-art-content > div:nth-child(3n) {
		flex: 1 1 100%;
		justify-content: flex-start;
		padding-left: 0;
	}
	
	.discover-art-inner-wrapper,
	.object-discover-art-thesaurus,
	.object-discover-art-content > div:nth-child(3n) > div:first-child {
		width: 100%
	}
	
	/* 4th column*/
	.object-discover-art-content > div:nth-child(4) {
		width: 100%;
		padding-top: 30px;
		padding-bottom: 10px;
	}
	
	/*** 	End of STC-6248 	***/
	

	/********** Artist page **********/
	/* STC-6257: Remove left padding for smaller screen width */
	.artist-nav-back-stc,
	.action-info, 
	.including-parts-div,
	.artist-nav-vra-items {
		padding-left: 0;
	}
	
	.artist-nav {
		padding-bottom: 0;
	}
	
	.artist-details-block {
		display: flex;
		flex-direction: column;
	}
	
	.action-details-block {
		display: flex;
	    flex-direction: column;
	    flex: 1 1 100%;
	    align-items: flex-start;
	    padding-top: 0;
	}

}

@media screen and (max-width: 800px) {
	/* STC-6378: [Search Results Page] Fixed "Artists in this search" blocks */
	#resultArtists .section-title-and-subtitle {
		padding-top: 42px;
	}
	/* STC-6382: Reset 'Cancel' and 'Apply' actions position */
	.filter-top-buttons {
		padding-top: 3ex;
	}
	/* STC-6373: Set width to 'auto' as long Object image should never be stretched to fill the container */
	.object-image {
		width: auto;
    	height: auto;
	}
	/* STC-6372: Fixed Landscape oriented images are cropped on mobile */
	.image-wrapper {
		max-width: 100vw;
	}
}

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

	/* STC-6322: [Object Page] Reposition 'On View' indicator at break point ≤600px */
	.on-view-on-tour-indicator {
		padding: 5px 0px 0px 21.5px; /* STC-6372,6373 - reset padding-top */
	}
	.md-button.on-view-on-tour-btn {
		font-size: 14px;
		padding: 0 4px;
		min-height: 1ex;
		min-width: 10ex;
		line-height: 23px;
	}
	.object-image {
		width: auto; /* STC-6373: Fixed long Object image should never be stretched to fill the container */
    	height: auto;
	}
	/* STC-6372: Fixed Landscape oriented images are cropped on mobile */
	.image-wrapper {
		max-width: 100vw;
	}

	/* STC-6262: [Filters panel] Only set the width of the label container for selection container */	
	.filterselect-container .filter-label-container {
		width: 88%;
	}
	
	/* STC-6262: [Filters panel] Adjust the width for the search bar */	
	.simple-search-container .simple-input-control {
		width: 93%;
	}
	
	/* STC-6262: [Filters panel] Adjust the space from right for the search icon */	
	.simple-search-container .search-icon {
		right: 8%;
	}

	/* STC-6382: Reset 'Cancel' and 'Apply' actions position */
	.filter-top-buttons {
		padding-top: 2ex;
	}

	/* STC-6382: [Landing Page] Reposition 'INCLUDING PART', 'ADD A FILTER' and stc-chips */
	.stc-chips-filters-list {
		float: left;
	}
	.ngacdl-flex-row-container .checkbox-div {
		padding-left: 0;
	}
	.search-filters-container .stc-chip {
		margin-right: 1ex;
	}
	.search-filters-container .add-filter-container .flex-item {
		order: 2;
		padding-top: 6ex;
		margin-left: -22.5ex;
	}
	.search-filters-container .add-filter-container .ngacdl-flex-column-container.justify-end {
		order: 1;
	}
	.search-filters-container .add-filter-container .flex {
		-webkit-box-flex: 0;
		flex: 0;
	}
	.search-filters-container .add-filter-container {
		position: relative;
		display: flex;
	}

	/********** Object page **********/
	/* STC-6275: Fixing "Search the Collection" link alignment in ≤600px */
	.object-nav-back-stc {
		flex: 1 1 100%;
		display: block;
		top: 4.3ex;
	}
	
}

@media (max-width: 500px) {
	/* STC-6372,6373 - Resize at 500px */
	.md-button.on-view-on-tour-btn {
		font-size: 12px;
		line-height: 20px;
	}
	
	/* STC-6374: [Landing Page] Repostion 'Search-in' text box at 500px */
	.search-container .action-set {
    	width: 100%;
    	height: 55px;
    	position: relative;
	}
	
	.search-container .search-dropdown-checklist {
		width: 75%;
		border-radius: 0 0 0 0.5rem;
	}
	
	.search-container .search-dropdown-checklist ul.items {
		width: 100%;
		margin-left: 2%;
	}
	
	.search-container .action-set .search-dropdown-title {
		height: 55px;
    	text-align: center;
    	padding: 18px;
    	border-radius: 0 0 0 0.5rem;
    	border-left: 1px solid #999999;
    	border-right: 2px solid #999999;
	}
	
	search-filters:not(.filter-landing-theme) .search-dropdown-checklist,
	search-filters:not(.filter-landing-theme) .search-btn-container {
	    background: #444444;
	}
	
	.search-btn-container {
		height: 55px;
		width: 25%;
	}
	
	.search-container .search-input-container .input-control {	
    	margin-bottom: 0;
    	height: 55px;
		font-size: 18px;
		border-radius: 0.5rem 0.5rem 0 0;
		padding-right: 28px;
	}
	
	/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
	body:not(.firefox-css) .search-container .search-input-container .input-control {
		backdrop-filter: none;
	}	
	
	.filter-landing-theme .search-input-container:not(.no-input),
	.filter-landing-theme .search-container .search-dropdown-title:not(.container-with-no-user-input),
	.filter-landing-theme .search-btn-container {
  		border: 1.5px solid white;
	}
}

/* STC-5822: Enhanced CSS for mobile devices */
@media (max-width: 480px) {

	/* STC-6322: [Object Page] Reposition 'On View' indicator at break point ≤480px */
	.on-view-on-tour-indicator {
		padding: 4px 0px 0px 19px;
	}
	.md-button.on-view-on-tour-btn {
		font-size: 12px;
		padding: 0 4px;
		min-height: 1ex;
		min-width: 10ex;
		line-height: 20px; /* STC-6372,6373 - reset line-height */
	}

	/* STC-6262: [Filters panel] Adjust the width of the label container */	
	.filterselect-container .filter-label-container {
		width: 80%;
	}
	
	/* STC-6262: [Filters panel] Adjust the width for the search bar */	
	.simple-search-container .simple-input-control {
		width: 90%;
	}
	
	/* STC-6262: [Filters panel] Adjust the space from right for the search icon */	
	.simple-search-container .search-icon {
		right: 12%;
	}
	
	search-filters:not(.filter-landing-theme) .search-dropdown-checklist,
	search-filters:not(.filter-landing-theme) .search-btn-container {
	    background: #444444;
	}
	
	.search-container {
		display: flex;
	 	flex-direction: column;
	}
	
	.search-container .search-input-container {
		width: 100%;
		border-radius: 0.5rem 0.5rem 0 0;
	}
	
	.search-container .search-input-container .input-control {
    	margin-bottom: 0;
    	height: 55px;
		font-size: 14px;
		border-radius: 0.5rem 0.5rem 0 0;
		padding-right: 28px;
	}
	
	.search-container .search-input-container .input-control:focus {
    	border-color: #bbbbbb;
	}
	
	.search-container .action-set {
    	width: 100%;
    	height: 55px;
    	position: relative;
	}
	
	.search-container .search-dropdown-checklist {
		width: 75%;
		border-radius: 0 0 0 0.5rem;
	}
	
	.search-container .action-set .search-dropdown-title {
		height: 55px;
    	text-align: center;
    	padding: 18px;
    	border-radius: 0 0 0 0.5rem;
    	border-left: 1px solid #999999;
    	border-right: 2px solid #999999;
	}
	
	.search-container .search-dropdown-title.container-with-active-dropdown { 
		border-left: 1px solid #ccc;
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}
	
	.search-dropdown-title md-icon.search-chevron {
    	font-size: 12px;
    	width: 12px;
    	height: 12px;
    	min-height: 12px;
    	min-width: 12px;
	}
	
	.search-container .search-btn-container {
    	float: left;
    	height: 55px;
    	width: 25%;
    	border-radius: 0 0 0.5rem 0;
	}
	
	.search-container .search-btn-container .search-icon {
		font-size: 22px;
	}
	
	.search-container .search-dropdown-checklist ul.items {
		width: 100%; /* STC-6374: Fixed "Search In" checkboxes not to extend beyond the page margins */
		margin-left: 2%;
	}
	
	/* STC-5844: display the full WoA images without cropping in the carousel of object page */
	.object-image {
		/* STC-6348: [Mobile View] Object page: Long images should not appear compressed */
		width: auto;
    	height: auto;
	}
	/* STC-6372: Fixed Landscape oriented images are cropped on mobile */
	.image-wrapper {
		max-width: 100vw;
	}
	
	
	/* landing page */
	
	.filter-landing-theme .search-input-container.no-input {
		border: 1.5px solid #bbbbbb;
	}
	
	.filter-landing-theme .search-input-container .input-control {
    	background: rgba(0, 0, 0, 0.2);
    	border-bottom: none;
    	padding-right: 28px;
	}
	
	/* STC-6344: Apply 'backdrop-filter' conditionally as it has limited browser support */
	body:not(.firefox-css) .filter-landing-theme .search-input-container .input-control {
    	backdrop-filter: none;
	}
	
	.filter-landing-theme .search-container .search-dropdown-title {
    	border: none;
	}
	
	.filter-landing-theme .search-input-container:not(.no-input),
	.filter-landing-theme .search-container .search-dropdown-title:not(.container-with-no-user-input),
	.filter-landing-theme .search-btn-container {
  		border: 1.5px solid white;
	}
	
	.filter-landing-theme .search-container .search-dropdown-title.container-with-no-user-input {
		border-right: 1.5px solid black;
	}
	
	.filter-landing-theme .search-container .search-dropdown-title.container-with-active-dropdown { 
		border-bottom: 1px solid rgba(0,0,0,0.3);
	}
	
	.filter-landing-theme .search-btn-container.container-with-no-user-input {
		border-left: 1.5px solid black;
	}
	
	/* STC-6326: [Mobile: Filter panel] Display enhancements required for various text and sections */
	.active-filter-container {
		display: block;
	}
	.active-filter-container .ellipsis {
		word-wrap: break-word;
    	white-space: normal;
	}
	.active-filters {
		line-height: 2ex;
		margin-bottom: 5ex;
		white-space: nowrap;
	}
	.filter-top-buttons {
		display: block;
		position: absolute;
		padding-top: 1ex;
		top: -1px;
	}
	.add-filter-label {
		white-space: nowrap;
	}
	.add-filter-container md-checkbox .md-label {
		white-space: nowrap;
		font-size: 14px;
	}
	.stc-chips-filters-list {
		float: left;
	}
	.ngacdl-flex-row-container .checkbox-div {
		padding-left: 0;
	}
	.search-filters-container .stc-chip {
		margin-right: 1ex;
	}
	.search-filters-container .add-filter-container .flex-item {
		order: 2;
		padding-top: 6ex;
		margin-left: -20.5ex;
	}
	.search-filters-container .add-filter-container .ngacdl-flex-column-container.justify-end {
		order: 1;
	}
	.search-filters-container .add-filter-container .flex {
		-webkit-box-flex: 0;
		flex: 0;
	}
	.search-filters-container .add-filter-container {
		position: relative;
		display: flex;
	}

	/* STC-6325: [Mobile: Search Results Page] Display enhancements required for various text and sections */
	.results-container .card-header-set .subtitle {
		white-space: nowrap;
	}
	/* SORT BY & RELEVANCE */
	.card-header-set.ngacdl-flex-row-container,
	.card-header-set .card-actions {
		display: inline-block;
	}
	.sorting-label {
		float: left;
	}
	.sorting-select-container {
		white-space: nowrap;
		float: left;
	}
	/* ARTIST IN THIS SEARCH */
	#resultArtists .ngacdl-flex-row-container,
	#resultArtists .ngacdl-flex-row-container .card-actions {
		display: inline-block;
	}

	/* STC-6332: [Mobile: Search Results Page] Avoid Long "Topic" tokens are being cut off */
	.topic-container .stc-chip {
		height: auto;
		line-height: 30px;
	}
	.result-topics-container .topic-container .stc-chip .stc-search-icon {
		padding-top: 13px;
		padding-right: 5px;
		display: block;
		float: left;
	}
	.result-topics-container .topic-container .stc-chip .stc-chip-label {
		font-size: 18px;
		position: static;
		display: block;
		margin-left: 3ex;
	}
	
	/* object page */
		
	.narrative-title {
		flex: 1 1 85%;
	}

	.accordion-container .icon-container {
		flex: 1 1 15%;
	}
	
	/* STC-6311: Stack artist names vertically in smaller screen width */	
	.artist-container {
		flex-direction: column;
    	align-items: flex-start;
	}
	
	.artist-inner-container {
		width: 100%
	}
	
	/* End of STC-6311 */	
	
	/* STC-6328: Adjust various alignments to stack 'View All' action vertically for screen width < 480px */
	.ngacdl-flex-row-container.row-display {
		flex-direction: column;
	}
	
	.landing-collection-header .card-title {
		margin-bottom: 0.5rem;
	}
	
	.title-spacer {
		width: 0;
		height: 0;
	}
		
	#relatedParts .section-title-and-subtitle,
	#otherWorksBy .section-title-and-subtitle,
	#otherWorksFromCollection .section-title-and-subtitle,
	#otherWorksFromDepartment .section-title-and-subtitle,
	#fromTheSameTimeAndPlace .section-title-and-subtitle,
	#worksMadeWith .section-title-and-subtitle,
	#worksFeaturing .section-title-and-subtitle {
		margin-bottom: 0.5rem;
	}
	
	.section-view-all-container {
		margin-bottom: 2rem;
	}
	
	.carousel-view-all-btn {
		position: initial;
		padding: 0;
	}
	
	/* End of STC-6328 */	
	
}

/* STC-6148: Set the default size for screen width 901px - 1000px */
/* STC-6229: Remove the maximum height for the carousel content */
@media (min-width: 901px) and (max-width: 1000px) {
	.carousel-content {
		height: auto;
		width: 300px;
	}
}

/* STC-6154: Reduce margin as the side margins of the page are now smaller */
@supports (position: sticky) or (position: -webkit-sticky) {
	#scroll-top-btn {
		margin-right: -1%;
	}
}

.filter-top-buttons {
	display: flex; /* STC-6382: Consistent the CANCEL + APPLY buttons */
	align-items: flex-start;
}
/* STC-6181: increased the font size */
.filter-top-buttons .md-button {
	height: 45px;
	font-size: 16px;
	text-transform: uppercase;
}
.filter-cancel-btn, .filter-apply-btn {
	text-transform: none;
	border-radius: 5px;
	box-sizing: border-box;
}
.filter-cancel-btn {
	border: 1px solid white;
}
/* STC-6181: change the background color & font color */
.filter-apply-btn {
	margin-right: 0px;
	color: #000000 !important;
	background-color: #FFFFFF !important;
}

.from-the-same-year {
	padding-bottom: 8em;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

/* 
 * Pop-up Gallery
 */
.pswp__bg {
	background: rgb(68, 68, 68);
}

.pswp__error-msg {
	width: 100% !important;
}

.pswp__button--arrow--left:before {
	background-position: -218px -44px;
}

.pswp__button--arrow--right:before {
	background-position: -177px -44px;
}

/* STC-6372: Fixed for Landscape image border. Eg. IRN-36334 
   (Override photoswipe.css property)
*/
.pswp img {
    max-width: 98.6%;
}

/* STC-5821: override the CSS styling resulted from NGA source */
.page-main__inner {
	width: 100%;
	padding-left: 0;
    padding-right: 0; 
}

/* STC-6546: Enable default focus styles to all elements in StC (Code adapted from Production) */
*:focus .grid-info,
a:focus {
	outline: #444444 solid 2px !important;
}



/*** STC-6114 & 6115: Embedded section ***/

/* STC-6271: Reduce padding-top for embedded content */
.embedded-container {
	display: flex;
    justify-content: flex-start;    
    flex-direction: column;
    padding-top: 30px;
}

.embedded-content-container {
	width: calc(100% / 3 * 2);
	height: auto;  
	margin-top: 45px;    
}

/* STC-6271: Remove margin-top for first embedded item */
.embedded-container > :first-child > :first-child {
	margin-top: 0px;
}

@media (max-width: 768px) {

	.embedded-content-container {
		width: 100%;
		height: 100%;  
	}	
}

.embedded-content-container img {
 	text-align: center;
    display: block;
    position: relative;
    object-fit: cover;
	max-height: 500px;
	margin: auto;
}

.embedded-content-container .embedded-info {
	position: relative;
    padding-top: 25px;
}

/* STC-6278: Set CSS styles for the title of the embedded item */
/* STC-6306 & 6307: Rename the class name */
.embedded-info-title {
	font-family: "Brut Bold";
	font-size: 32px;
	margin-bottom: 30px;
}

.embedded-info-caption {
	font-size: 20px;
	font-family: "Brut Regular";
	margin-top: 10px;
}


.audio-section .embedded-caption-title {
	margin-bottom: 45px;
}

.embedded-caption-title * {
	font-family: "Brut Bold";
	font-size: 32px;
}

/*** END OF STC-6114 & 6115: Embedded section ***/