@font-face {
  font-family: 'Akzidenz Regular';
  src:  url('./webfonts/akzidenz-grotesk-regular-webfont.ttf')  format('truetype'), 
        url('./webfonts/akzidenz-grotesk-regular-webfont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Akzidenz Medium';
  src:  url('./webfonts/akzidenz-grotesk-medium-webfont.ttf')  format('truetype'), 
        url('./webfonts/akzidenz-grotesk-medium-webfont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal ;
}

@font-face {
  font-family: 'Akzidenz Super';
  src:  url('./webfonts/akzidenz-grotesk-super-webfont.ttf')  format('truetype'),  
        url('./webfonts/akzidenz-grotesk-super-webfont.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


.center {
    margin-left: auto;
	margin-right: auto;
    width: auto;
    border: 0px solid #73AD21;
    padding: 10px;
	background-color:#f6f6f6;
}
body 
{
	font-family: 'Akzidenz Regular', Arial, Helvetica, sans-serif;
    background: #aaa;
	font-size: 16px;
	color: #444;
	padding: 0px;
	margin: 0px;
	border: 0px;
}
.wrapper
{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 40px;
	background-color: #fff;
}
.logoBanner
{
	background-color: #1d1e19;
	height: 105px;
}
.logoBanner img
{
	float: left;
	border: 0px;
}




/* === Heading Banner Styling START === */

.headingBanner
{
	height: 193px;
	border-top: 4px solid #fff;
	background-color: #CD202C; /* Default colour, will usually be overwritten by what is in Banner.xml */
}

.headingImage
{
	height: 193px;
	border-left: 4px solid #fff;
	width: 484px;
	float: right;
    background-image: url("/images/banner/rotating/rotating-image-4.jpg");
}

.headingImage img
{
	border: 0px;
	width: 100%;
}

.headingColourBlock
{
	height: 73px;
	float: left;
}

.headingColourBlock img
{
	padding: 0px;
	position: absolute;
	bottom: 0px;
}

.headingColourBlock a img
{
	border: 0px;
}

.headingColourBlock h2
{
	color: #fff;
	font-size: 120%;
	padding: 0;
	margin: 0;
	border: 0;
	font-weight: normal;
	padding: 10px 5px 3px 20px;
}

.headingColourBlock h1
{
	color: #fff;
	padding: 0;
	margin: 0;
	border: 0;
	font-weight: bolder;
	font-size: 300%;
	padding: 0px 5px 3px 20px;
    font-family: 'Akzidenz Super';
}

.headingColourBlock h1 a
{
	color: #1d1e19;
	text-decoration: none;
}

/* === Heading Banner Styling END === */



/* === Mega Menu Styling START === */

/* Taken from Headscape's stylesheet (modified by JCM) */

.megaMenu { background-color: #303030; height: 42px; color: #000; z-index: 500; clear: both; width: 980px; display: block; position: relative;  }
.megaMenu.norm { display: block; }
.menu { display: table; list-style: none; width: 100%; height: 42px; margin: 0; padding: 0;  }
.menu li { position: relative; border: none; display: table-cell; text-align: center; }

.menu li.fullwidth { position: static !important; }
.menu li.hover { background: #fff; }
.menu li a { text-decoration: none; display: block; font-size: 1.2em; color: #aaa; padding: 11px 34.25px; }
.menu li a:hover { background: #fff !important; }

.menu li.active a { background: #e5dcc6; }
.menu li:hover a { color: #CD202C; background: #fff; text-shadow: none; position: relative; z-index: 11; }
.menu li.hover div a { display: inline; text-decoration: none; text-shadow: none; border: none; padding: 0; }

.menu .dropdown_fullwidth { left: -999em; display: block; position: absolute; z-index: 999; background: #fff; border: 4px solid #F6F6F6; border-top: none; text-align: left; width: 923px; margin: 13px 0 0; padding: 25px; -webkit-box-shadow: 0px 9px 11px rgba(3,3,3,0.1); -moz-box-shadow: 0px 9px 11px rgba(3,3,3,0.1); box-shadow: 0px 9px 11px rgba(3,3,3,0.1); }

.menu li.hover .dropdown_fullwidth { left: 0; top: 30px; }
.menu li.hover .align_right { left: auto; right: -1px; top: 25px; }
.menu li.right .dropdown_fullwidth { right: 18px; top: 33px; }

.menu .col_1,.menu .col_2,.menu .col_3,.menu .col_4,.menu .col_5,.menu .col_6 { display: inline; float: left; position: relative; margin-left: 20px; }
.menu .col_1 { margin-top: 10px; width:152px; margin-left: 25px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }
.menu .col_1.narrow { width:100px; margin-left: 25px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }
.menu .col_1.wide { width:200px; margin-left: 25px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }
.menu .col_1.mid { width:120px; margin-left: 25px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }

.menu .col_4 { width: 710px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }
.menu .col_3 { width: 510px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }
.menu .col_2 { width: 310px; border-left: 1px solid #F6F6F6; padding-left: 13px; margin-left: 13px; }

.menu .firstcolumn { margin-left: 0; clear: left; border-left: none; padding-left: 0 !important;  }

.menu p,.menu ul,.menu li,.menu h2,.menu h3 { font-size: 14px; font-family: 'Akzidenz Regular', Arial, Helvetica, sans-serif; text-align: left; color: #333; }
.menu p { color: #555; font-size: 12px; text-shadow: 1px 1px 1px #efefef; margin: 0 0 10px 0; line-height: 1.7; }
.menu .strong { font-family: 'Akzidenz Super'; }
.menu .italic { font-style: italic;}
.menu h2,.menu h3 a { margin-top: -5px; }

.menu h2 { display: block; font-weight: normal; padding-bottom: 5px; letter-spacing: -0.05em; font: 18px Vollkorn,"Times New Roman",Times,serif; }
.menu h2 a { color: #555 !important; background: none; }
.menu h2 a:hover { color: #000 !important; }

.col_3 h2, .col_2 h2 { padding: 10px 0 0 0; }

.menu h3 { border: none; float: left; font-size:12px; padding:0 0 5px 10px; background: url(../images/right8.png) 0 0 no-repeat; }
.menu h3 a { font-family: 'Akzidenz Super'; color: #555 !important; }
.menu h3 a:hover { font-family: 'Akzidenz Super'; color: #000 !important; }

.menu img { padding: 4px; margin-bottom: 5px; background: #fff; border: 1px solid #ddd; }
.menu img:hover { padding: 4px; background: #fff; border: 1px solid #555; }

.menu li.hover .col_1 ul { list-style: none; margin: 0 0 12px 0; padding: 0; margin: 0; }
.menu li.hover .col_1 ul li { font-size: 12px; position: relative; float: left;  width: 150px; margin: 0 0 1px 0; padding: 0 0 5px 0; }
.menu li.hover .col_1 ul.strong li { font-size: 13px; font-weight: normal; position: relative; float: left; width: 155px;  margin:0 0 10px 0;  line-height: 0px;  }
.menu li.hover .col_1 ul.strong li a { background: url('/images/grey-right-arrow.png') 0 0 no-repeat !Important;  color: #555; line-height: 15px; }
.menu li.hover .col_1 ul.strong li a:hover { background: url('/images/grey-right-arrow-filled.png') 0 0 no-repeat !Important;  }

.menu li.hover .col_1.narrow ul li { width: 100px; }
.menu li.hover .col_1 ul li a { background: url('/images/grey-right-arrow.png') 0 0 no-repeat;  float: left; padding:0 0 0 10px;  display: block; color: #666; }
.menu li.hover .col_1 ul li a:hover { background: url('/images/grey-right-arrow-filled.png') 0 0 no-repeat !important; color: #000; }

.menu li.hover ul.mm_rsList li a { background: none; padding: 8px 0 0 0; }

.menu li.hover ul.mm_rsList li .datetime { margin: 0; font-size: 0.9em; text-decoration: none; border-bottom: none; padding: 0; font-family: 'Akzidenz Super'; padding-bottom: 8px; }
.menu li.hover ul.mm_rsList li abbr { border-bottom: none;  }
.menu li.hover ul.mm_rsList li a { padding: 0 0 10px 0; margin: 0;  }

/* === Mega Menu Styling END === */



/* === Side Navigation Styling START === */

.sideNavigation { background-color: #fff; font-family: 'Akzidenz Medium'; color: #787878; border-right: 1px solid #aaa; }

.sideNavigation ul
{
	border: 0px;
	padding: 0px;
	margin: 0px;
    padding-top: 0px;
}

.sideNavigation .childLinks ul li
{
	border-bottom: 1px solid #fff;
}

/* Styling for when JavaScript is turned off START */

#lhsAccordion, #_ctl0_SideNavigation1_lhsUpLinks
{
    padding: 0;
}

#lhsAccordion h3, #_ctl0_SideNavigation1_lhsUpLinks h3 
{
    background: #fff none 0 0 no-repeat;
    border-bottom: 1px solid #aaa;
    font-weight: normal;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-top: 1px solid #ffffff;
    cursor: pointer;
    position: relative;
    margin-top: 1px;
    zoom: 1;
    padding: 0px;
    margin: 0px;
}

#lhsAccordion h3 a, #_ctl0_SideNavigation1_lhsUpLinks h3 a 
{
    display: block;
    font-size: 10.5pt;
    font-family: 'Akzidenz Medium';
    font-weight: normal;
    padding: 15px;
    text-decoration: none;
    color: #555;
}

#lhsAccordion h3 a:hover,
#lhsAccordion h3 a:active,
#_ctl0_SideNavigation1_lhsUpLinks h3 a:hover,
#_ctl0_SideNavigation1_lhsUpLinks h3 a:active 
{
    background-color: #F6F6F6;
    background-image: none;
    color: #000;
}

/*Childless Links with h3 and class */
#lhsAccordion h4  { background: #F6F6F6 !important; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; cursor: pointer; position: relative; margin-top: 1px; zoom: 1; padding: 0px; margin: 0px; }
#lhsAccordion h4 a { display: block; font-size: 9pt; font-family: 'Akzidenz Super'; padding: 10px 5px 10px 10px; text-decoration: none; color: #555; }
#lhsAccordion h4 a:hover { background: #E2D9C5; }

.childLinks li 
{
	border-radius: 0px; 
	-moz-border-radius: 0px; 
	-webkit-border-radius: 0px; 
	background-color: #fff; 
    font-family: 'Akzidenz Regular';
	border-top: 0; 
	position: relative; 
	top: 0px; 
	overflow: auto; 
	zoom: 1;
	border-bottom: 1px solid #fff;
}

.childLinks li a
{
	color: #222222; 
	font-weight: normal;
}

/* Styling for when JavaScript is turned off END */

/* Matt's Styling START */
/* See jquery.ui.accordion.css for more side navigation styling */

#sideNavigation { float: left; width: 22%; padding: 0 0 0 0; margin: 0 0 10px 0; }
#sideNavigation #SideNavigation1_lhsUpLinks { text-decoration: none; }
#sideNavigation #SideNavigation1_lhsUpLinks h3 { margin: 2px 0 1px 0; font-size: 9pt; margin: 0; border-bottom: 1px solid #aaa; }
#sideNavigation #SideNavigation1_lhsUpLinks h3 a { text-decoration: none; padding: 15px; color: #555; display: block; font-size: 10.5pt; font-weight: normal; }
#sideNavigation #SideNavigation1_lhsUpLinks h3 a:hover { background-color: #F6F6F6; color: #000; }
#sideNavigation #SideNavigation1_accordionHTML h3 { margin: 0; }
#sideNavigation #SideNavigation1_accordionHTML h3 a { margin: 0; }

/* Matt's Styling END */


/* === Content Styling START === */

h1
{
    font-size: 220%;
    line-height: 1;
}

h2
{
    font-size: 150%;
}

h3
{
    font-size: 140%;
}

h4
{
    font-size: 120%;
}

h5
{
    font-size: 100%;
}

h1, h3, h5
{
    color: #2a2929;
}

h2, h4
{
    color: #7e2e6a;
}

h1, h2, h3, h4, h5
{
    font-family: 'Akzidenz Medium';
    font-weight: normal;
}

h2+p, h3+p, h4+p, h5+p
{
    margin-top: -5px;
}

.bold
{
    font-weight: normal;
    font-family: 'Akzidenz Medium';
}

.italic
{
    font-style: italic;
}

.smallerText
{
    font-size:85%;
}

.normal
{
    font-weight:normal;
}

.center
{
	text-align: center;
}

.marginBottom10
{
	margin-bottom: 10px;
}

.marginBottom20
{
	margin-bottom: 20px;
}

.marginBottom30
{
	margin-bottom: 30px;
}

.marginTop10
{
	margin-top: 10px;
}

.marginTop20
{
	margin-top: 20px;
}

#ContentMain_lblMetaDescription,
#ContentMain_lblMetaKeywords
{
    display: none;
}

.content
{
    background-color: #fff;
    padding: 15px;
    font-size: 90%;
    padding-left: 235px;
}

.content p
{
    line-height: 1.8;
}

.content a:link,
.content a:visited,
.content a:hover,
.content a:active,
.copyright a:link,
.copyright a:visited,
.copyright a:hover,
.copyright a:active
{
    color: #444;
    text-decoration: none;
    border-bottom: 1px dotted #444;
}

.content a:hover,
.content a:active,
.copyright a:hover,
.copyright a:active
{
    border-bottom: 1px solid #CD202C;
    color: #CD202C;
}

.content a.external
{
	background: transparent url('/images/link-external.png') no-repeat center right;
	padding-right: 15px;
}

.content ul
{
    padding-left: 15px;
    margin-left: 20px;
}

.content ol
{
    padding-left: 20px;
    margin-left: 20px;
}

.content ul li, .content ol li
{
    padding-bottom: 10px;
    padding-left: 5px;
    /*line-height: 1.4;*/
}

.content ul li
{
    /*list-style-image: url('/images/bullet_blue.gif');*/
    list-style-type: square;
}

.content ol li ol li:first-child,
.content ul li ul li:first-child
{
    padding-top: 10px;
}

.content ol li ol li:last-child,
.content ul li ul li:last-child
{
    padding-bottom: 0px;
}

.content img
{
    border: 1px solid #aaa;
    padding: 5px;
    margin: 5px 10px 0px 5px;
    background-color: #fff;
}

.content .tableDefault tr td a:link img,
.content .tableDefault tr td a:visited img,
.content .tableDefault tr td a:hover img,
.content .tableDefault tr td a:active img,
.content a:link img,
.content a:visited img,
.content a:hover img,
.content a:active img
{
    margin: 0px;
}

.content .tableDefault img
{
    border: 0px;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
}

.content a:link .imgNoStyling,
.content .imgNoStyling
{
    border: 0px;
    padding: 0px;
}

.content a.noBorder,
.content noBorder
{
    border: 0px;
    border-width: 0px;
}

table.noBorder,
table.noBorder th,
table.noBorder td
{
    border: 0px;
    border-width: 0;
}

.content .caption p
{
    background-color: #F6F6F6;
    padding: 5px 10px 10px 10px;
    margin: 0px 10px 0px 5px;
    font-style: italic;
    font-size: 90%;
}

.content .caption a
{
    border-bottom: 0px;
}

.content .caption p a
{
    border-bottom: 1px dotted #444;
}

.content .caption p a:hover
{
    border-bottom: 1px solid #CD202C;
}

.content .caption a img
{
    margin: 0px 0px 0px 5px;
}

.content .updatedStar /* Styling for Freshers */
{
    border: 0px;
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
    margin-bottom: -5px;
}
/* === Content Styling END === */


/* === Footer Styling START === */

.footer
{
	background-color: #181818; /* url('/images/footer/microscope.gif') no-repeat bottom right; */
    color: #aaa;
	font-size: 90%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	padding: 20px 0px;
}

.footer h3
{
	font-size: 120%;
    font-weight: normal;
    font-family: 'Akzidenz Super';
    color: #fff;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 10px;
}

.footer p
{
	line-height: 0.8;
}

.footer a:link,
.footer a:visited,
.footer a:hover,
.footer a:active
{
	color: #aaa;
	text-decoration: none;
	border-bottom: 1px dotted #aaa;
}

.footer a:hover,
.footer a:active
{
	border-bottom: 1px solid #fff;
	color: #fff;
}

.footer ul
{
	margin: 0;
	padding: 0;
}

.footer li
{
	list-style-type: none;
	padding-bottom: 5px;
    display: block;
}

.footer .colSocialMedia 
{  
	width: 240px;
	float: left;
}

.footer .colSocialMedia li a
{
    height: 32px;
    width: 32px;
    display: inline-block;
    border: 0;
}

.footer .colSocialMedia li
{
	padding-right: 10px;
    display: inline;
}

.footer .colSocialMedia li a.facebook { background-image: url('../new_images/social/facebook.png'); }
.footer .colSocialMedia li a.facebook:hover { background-image: url('../new_images/social/facebook-hover.png'); }
.footer .colSocialMedia li a.twitter { background-image: url('../new_images/social/twitter.png'); }
.footer .colSocialMedia li a.twitter:hover { background-image: url('../new_images/social/twitter-hover.png'); }
.footer .colSocialMedia li a.instagram { background-image: url('../new_images/social/insta.png'); }
.footer .colSocialMedia li a.instagram:hover { background-image: url('../new_images/social/insta-hover.png'); }
.footer .colSocialMedia li a.linkedin { background-image: url('../new_images/social/linkedin.png'); }
.footer .colSocialMedia li a.linkedin:hover { background-image: url('../new_images/social/linkedin-hover.png'); }
.footer .colSocialMedia li a.youtube { background-image: url('../new_images/social/youtube.png'); }
.footer .colSocialMedia li a.youtube:hover { background-image: url('../new_images/social/youtube-hover.png'); }

.footer .colQuicklinks 
{
	width: 500px;
	float: left;     
}

.footer .colEnquiries 
{ 
	width: 540px;    
	float: left;
	padding-left: 15px;
}

.copyright
{
	background-color: #333;
    color: #aaa;
	padding-left: 1.2em;
    padding-top: 0.8em;
	font-size: 80%;
	font-family: Arial;
	height: 2em;
}

/* === Footer Styling END === */


/*
 * jQuery UI Accordion 1.8.14
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */

.ui-accordion .ui-accordion-header { border-radius:0px; -moz-border-radius:0px; -webkit-border-radius:0px; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; cursor: pointer; position: relative; margin-top: 1px; zoom: 1; padding: 0px; margin: 0px; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 14px; font-weight: normal; font-family: 'Akzidenz Medium'; padding: 10px 5px 10px 20px; text-decoration: none; color: #555; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; background-color: #F6F6F6; border-top: 0; margin-top: -2px; position: relative; top: 1px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content a { font-size: 14px; color: #222222; font-weight: normal; }
.ui-accordion .ui-accordion-content-active { display: block; }
.ui-accordion .ui-state-active { background-color: #F6F6F6 !important; border-left: 4px solid #CD202C !important; }
.ui-accordion .ui-accordion-header-active { border-left: 4px solid #CD202C !important; }

#lhsAccordion { padding: 0px 10px 10px 10px; }
#lhsAccordion h3 { outline: none; }
#lhsAccordion ul li a { padding-left: 21px; padding-bottom: 5px; padding-top: 5px; display: block; text-decoration: none; color: #555; }
#lhsAccordion ul li:first-child a { border-top: 1px solid #fff; }
#lhsAccordion ul li:last-child a { border-bottom: 1px solid #aaa; }
#lhsAccordion ul li a:hover { color: #000; display: block; border-left: 4px solid #CD202C; }
/* === jQuery END === */



.quote{
	font-family: Arial;
	font-weight: bold;
	
}
.quotefooter{
	font-size: 80%;
	color: gray;
	font-style:italic;
}

.previous-students-name{
	color: gray;	
}

.previous-student-topic{
	color: gray;
	font-style: italic;	
}

.group-news-title{
	font-size: 120%;
	
}
.group-news-footer{
	font-size:80%;
	color: gray;
}



/* === Images Gallery === */
* {
    box-sizing: border-box;
}

img-body {
    background-color: #f1f1f1;
    padding: 20px;
    font-family: Arial;
}

/* Center website */
.img-main {
    max-width: 1000px;
    margin: auto;
}

h1 {
    font-size: 50px;
    word-break: break-all;
}

.row {
    margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row > .column {
    padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 100%;
    display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Content */
.img-content {
    background-color: white;
    padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* === Images Gallery END=== */


/* === Staff Profile START=== */
.content-padding {
	padding: 20px;
	@media (--tablet) {
		padding: 40px;
	}
}

@mixin make-spaces($breakpoint: '') {
	$key: $breakpoint;
	$size: -#{$breakpoint};

	@if($breakpoint == '' ) {
		$key: default;
		$size: '';
	}

	@each $space, $value in $spaces {
		.page-margin-#{$space}#{$size} {
			padding-left: $value + px;
			padding-right: $value + px;
		}

		.padding-#{$space}#{$size} {
			padding-top: $value + px;
			padding-bottom: $value + px;
		}

		.padding-top-#{$space}#{$size} {
			padding-top: $value + px;
		}

		.padding-bottom-#{$space}#{$size} {
			padding-bottom: $value + px;
		}

		.margin-#{$space}#{$size} {
			margin-top: $value + px;
			margin-bottom: $value + px;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}

		.margin-top-#{$space}#{$size} {
			margin-top: $value + px;

			&:first-child {
				margin-top: 0;
			}
		}

		.margin-bottom-#{$space}#{$size} {
			margin-bottom: $value + px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

@include make-spaces();

@each $breakpoint, $value in $breakpoints {
	@media (--#{$breakpoint}) {
		@include make-spaces($breakpoint);
	}
}

/* === Staff Profile END=== */







/* === story-card START=== */

.story-card {
    $block: '.story-card';
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 20px;

    text-decoration: none;

    @media (--desktop) {
        margin-top: 0;
    }

    .light-grey-bg & {
        .no-touchevents &:hover {
            #{$block}__content {
                background-color: $white;
            }
        }
    }

    .no-touchevents &:hover {
        #{$block}__figure {
            img {
                transform: scale(1.1);
            }
        }

        #{$block}__content {
            background-color: $lightGrey;
        }

        #{$block}__link-icon {
            color: $purple;
        }
    }

    &__figure {
        position: absolute;
        left: 20px;
        top: -20px;

        width: 80px;
        overflow: hidden;

        z-index: 1;

        &:before {
            content: '';
            display: block;
            padding-top: 100%;
        }

        @media (--desktop) {
            width: 150px;
            left: auto;
            right: 0;
            top: 20px;
        }

        img {
            position: absolute;
            left: 0;
            top: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;
            transition: transform 0.3s $easeOutCubic;
        }
    }

    &__content {
        position: relative;
        display: flex;
        flex-grow: 100;

        padding: 80px 30px 32px 20px;

        border: 1px solid $grey;
        border-bottom: none;
        background-color: $lightestGrey;
        color: $darkestGrey;

        transition: background-color 0.3s $easeOutCubic;

        @media (--desktop) {
            min-height: 192px;
            padding: 18px 30px 24px 20px;
            margin-right: 20px;
        }

        &:after {
            content: '';
            position: absolute;
            left: -1px;
            right: -1px;
            bottom: 0;

            height: 3px;

            background: $purpleToRed;
        }
    }

    &__content-inner {
        display: flex;
        flex-direction: column;
        p + p {
            margin-top: 14px;
        }
        @media (--desktop) {
            width: calc(100% - 175px);
        }
    }

    &__date {
        display: inline-block;

        font-size: (14/16) + rem;
        font-weight: $boldWeight;

        margin-bottom: 8px;
    }

    &__title {
        font-weight: $boldWeight;

        font-size: (18/16) + rem;
        line-height: 1.2;

        margin-bottom: 15px;

        a {
            color: inherit;
            text-decoration: none;
        }

        @media (--wide) {
            font-size: (21/16) + rem;
        }

    }

    &__summary {
        flex-grow: 1;
        font-size: (14/16) + rem;
        line-height: 1.4;
    }

    &__link {
        display: none;
        margin-top: 25px;

        @media (--desktop) {
            display: inline-block;
        }
    }

    &__link-icon {
        display: block;
        color: $darkGrey;
        transition: color 0.3s $easeOutCubic;
    }

    &--featured {
        margin-top: 0;

        #{$block}__figure {
            position: relative;
            left: auto;
            top: auto;

            width: auto;

            margin-bottom: -100px;

            overflow: hidden;
            z-index: auto;

            @media (--tablet) {
                margin-bottom: 0;
            }

            @media (--desktop) {
                transform: none;
                margin-bottom: -100px;
            }

            &:before {
                content: '';
                display: block;
                padding-top: 80%;

                @media (--desktop) {
                    padding-top: 100%;
                }

                @media (--wide) {
                    padding-top: 70%;
                }
            }
        }

        #{$block}__content {
            padding: 15px 20px 32px 20px;
            margin-right: 20px;

            @media (--tablet) {
                margin: 0;
                padding: 15px 20px 20px 20px;
                transform: none;
            }

            @media (--desktop) {
                min-height: 0;
                margin-right: 20px;
            }
        }

        #{$block}__content-inner {
            @media (--desktop) {
                width: 100%;
            }
        }

        #{$block}__date {
            margin-bottom: 10px;
        }
    }

    &--profile {
        #{$block}__summary {
            font-size: (16/16) + rem;
            b {
                font-weight: $mediumWeight;
            }
        }

        #{$block}__link {
            display: inline-block;
        }

        #{$block}__link-icon {
            fill: $darkGrey;
        }

        #{$block}__figure {
            @media (--tablet) {
                width: 150px;
                left: auto;
                right: 0;
                top: 20px;
            }
        }

        #{$block}__content {
            @media (--tablet) {
                min-height: 192px;
                padding: 18px 30px 24px 20px;
                margin-right: 20px;
            }
        }
    }
}



// WEBPACK FOOTER //
// webpack:///app/components/story-card/sass/C:/TeamCityAgents/01/work/ESSEX_PROD/Web/assets/app/components/story-card/sass/modules/story-card.scss
/* === story-card END=== */

/* === layout START=== */

body,
html {
	min-height: 100%;
}

html {
	overflow-x: hidden;
	overflow-y: scroll;

    &.is-locked {
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

[v-cloak] {
	display: none !important;
}

.wrapper {
	&.is-locked {
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
	}
}

.container {
	@media (--wide) {
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}
}

.clearfix {
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

.block {
	&:before, &:after {
		content: '';
		display: table;
		width: 100%;
		clear: both;
	}

	background-color: $white;

	&:nth-child(odd) {
		background-color: $lightestGrey;
	}
}

.side-nav-column {
	@media (--tablet) {
		max-width: 250px;
	}
}

.extra-bottom-margin {
    margin-bottom:50px;
}


// .content-blocks {
// 	&:not(.content-blocks--detail) {
// 		.block:not(.block--bg) {
// 			background-color: $white;

// 			&:nth-child(odd) {
// 				background-color: $lightestGrey;
// 			}
// 		}
// 	}

// 	&--detail {
// 		.block:not(:first-child) {
// 			padding-top: 0;
// 		}
// 	}
// }



// WEBPACK FOOTER //
// webpack:///app/general/sass/C:/TeamCityAgents/01/work/ESSEX_PROD/Web/assets/app/general/sass/modules/layout.scss

/* === layout END=== */


/* === grid Start=== */

.grid {
    $block: ".grid";
    position: relative;

    &:before,
    &:after {
        clear: both;
        content: '';
        display: block;
    }
    &.no-gutter {
        margin-left: 0;
        margin-right: 0;
        > #{$block}__item {
            padding-left: 0;
            padding-right: 0;
        }
    }

    &--inline {
        > #{$block}__item {
            float: none;
            display: inline-block;
            vertical-align: middle;
        }
    }

    &--inline-bottom {
        > #{$block}__item {
            vertical-align: bottom;
        }
    }

    // flex helpers

    &--flex {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
        &:before,
        &:after {
            content: normal;
        }

        &-nowrap {
            flex-wrap: nowrap !important;
        }

        > #{$block}__item {
            float: none;
            display: flex;
            vertical-align: top;
        }
    }

    &--flex-desktop {
        @media (--desktop) {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            &:before,
            &:after {
                content: normal;
            }
            > #{$block}__item {
                float: none;
                display: flex;
                vertical-align: top;

                &--no-flex {
                    display: block;
                }
            }
        }
    }

    &--flex-tablet {
        @media (--tablet) {
            display: flex;
            align-items: stretch;
            flex-wrap: wrap;
            &:before,
            &:after {
                content: normal;
            }
            > #{$block}__item {
                float: none;
                display: flex;
                vertical-align: top;

                &--no-flex {
                    display: block;
                }
            }
        }
    }

    &--flex-centered {
        @media (--desktop) {
            display: flex;
            align-items: center;
        }
    }

    &--flex-inversed {
        @media (--desktop) {
            display: flex;
            flex-direction: row-reverse;
        }
    }
    &--centered {
        align-items: center;
    }
}

@mixin grid__item {
    width: 100%;
    position: relative;
    float: left;
    box-sizing: border-box;
    min-height: 1px;
    &.no-gutter {
        padding: 0;
    }
    // flex helpers

    &--flex {
        display: flex;
        align-items: stretch;
        & > * {
            flex: 1;
            max-width: 100%;
        }
    }

    &--flex-tablet {
        @media (--tablet) {
            display: flex;
            align-items: stretch;
            & > * {
                flex: 1;
                max-width: 100%;
            }
        }
    }

    &--block {
        display: block !important;
    }

    &--flex-column {
        flex-direction: column;
    }

    &--flex-end {
        align-items: flex-end;
    }

    &--flex-stretch {
        align-items: stretch;
    }

    &--flex-fluid {
        flex-grow: 1;
        flex-shrink: 1;
    }

    &--flex-fixed {
        flex-grow: 0;
        flex-shrink: 0;
    }
}

.grid__item {
    @include grid__item();

    &--centered {
        text-align: center;
    }
}

@mixin grid($containerColumnsCount, $grid-sizes) {

    //.grid logic :-)

    $maxColWidth: 100 / $containerColumnsCount;

    // loops

    @for $i from 1 through $containerColumnsCount {
        .grid--#{$containerColumnsCount} > .grid__item--span-#{$i} {
            width: $maxColWidth * $i + 0%;
        }
    }

    @for $i from 1 through $containerColumnsCount {
        .grid--#{$containerColumnsCount} > .grid__item--col-#{$i} {
            margin-right: -100%;
            left: $maxColWidth * ($i - 1) + 0%;
        }
    }

    @each $size, $value in $grid-sizes {
        $tweak: 0;
        @if $size != tablet {
            $tweak: 0;
        }
        $cumputed: $value + $tweak;
        @media only screen and (min-width: $cumputed) {
            @for $column from 1 through $containerColumnsCount {
                .grid--#{$containerColumnsCount} > .grid__item--span-#{$size}-#{$column} {
                    width: $maxColWidth * $column + 0%;
                }
                .grid--#{$containerColumnsCount} > .grid__item--col-#{$size}-#{$column} {
                    margin-left: $maxColWidth * ($column - 1) + 0%;
                    margin-right: -100%;
                }
            }
        }
    }

    @each $size, $value in $grid-sizes {
        @media only screen and (min-width: $value + 0.1) {
            .grid--#{$containerColumnsCount} > .hide--col-#{$size} {
                display: none;
            }
        }
    }

    // specific.grid

    .grid {
        $block: ".grid";

        margin-left: -$grid-default-gutter / 2 + px;
        margin-right: -$grid-default-gutter / 2 + px;

        > #{$block}__item {
            padding-left: $grid-default-gutter / 2 + px;
            padding-right: $grid-default-gutter / 2 + px;
        }
    }

    @include gutters();

    @each $size, $value in $grid-sizes {
        @media (--#{$size}) {
            @include gutters(-#{$size});
        }
    }
}

@mixin gutters($size: '') {
    $block: ".grid";

    @each $space, $value in $spaces {
        #{$block}--gutter-#{$space}#{$size} {
            margin-left: -$value / 2 + px;
            margin-right: -$value / 2 + px;

            > #{$block}__item {
                padding-left: $value / 2 + px;
                padding-right: $value / 2 + px;
            }
        }

        #{$block}--h-gutter-#{$space}#{$size} {
            margin-bottom: -$value + px;

            > #{$block}__item {
                margin-bottom: $value + px;
            }
        }
    }
}

// column helper // (col, width, grid columns)

@mixin column ($width, $offset: null, $gutter: $grid-gutter, $grid-columns: $grid-columns) {
    .grid--#{$grid-columns} & {
        $maxColWidth: 100 / $grid-columns;
        @include grid__item();
        width: $maxColWidth * $width + 0%;
        margin-right: 0;
        left: auto;
        padding-left: $gutter / 2;
        padding-right: $gutter / 2;
        @if $offset != null {
            margin-right: -100%;
            left: $maxColWidth * ($offset - 1) + 0%;
        }
    }
}

// create grid // (columns, gutter)

@include grid($grid-columns, $grid-sizes);


// WEBPACK FOOTER //
// webpack:///app/general/sass/C:/TeamCityAgents/01/work/ESSEX_PROD/Web/assets/app/general/sass/modules/grid.scss

/* === grid END=== */


/* === story-card END=== */
html {
    -webkit-text-size-adjust: none;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    @include akzidenz();
    font-size: $font-size-base + px;
    line-height: $line-height-base;
    color: $light;
    overflow-x: hidden;


}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
    line-height: $line-height-base;
}

.page-title {
    font-size: 16px;
    line-height: 1em;
    letter-spacing: 0;
    font-weight: $boldWeight;
    text-transform: uppercase;

    @media (--desktop) {
        font-size: 18px;
    }
}

.page-subtitle {
    font-size: 36/16 + em;
    line-height: 0.94em;
    letter-spacing: 0;
    font-weight: $boldWeight;

    a {
        color: inherit;
        text-decoration: none;
    }

    @media (--tablet) {
        font-size: 48/16 + em;
    }

    @media (--desktop) {
        font-size: 72/16 + em;
    }

    @media (--wide) {
        font-size: 80/16 + em;
    }

    &--little {
        font-size: 22/16 + em;

        @media (--desktop) {
            font-size: 30/16 + em;
        }
    }

    &--small {
        font-size: 32/16 + em;

        @media (--tablet) {
            font-size: 40/16 + em;
        }

        @media (--desktop) {
            font-size: 48/16 + em;
        }
        }

    &--medium {
        font-size: 36/16 + rem;
    }

    &--larger {
        font-size: 48/16 + rem;
    }

    &--big {
        font-size: 40/16 + em;

        @media (--tablet) {
            font-size: 70/16 + em;
        }

        @media (--desktop) {
            font-size: 80/16 + em;
        }
    }
}

.section-header {
    font-size: 32px;
    line-height: 0.94em;
    letter-spacing: 0;
    font-weight: $boldWeight;

    @media (--tablet) {
        font-size: 40px;
    }

    @media (--desktop) {
        font-size: 48px;
    }
}

.section-subheader {
    font-size: 24px;
    line-height: 0.94em;
    letter-spacing: 0;
    font-weight: $boldWeight;

    &--spacer {
        &:after {
            content: '';
            display: block;
            position: relative;

            width: 50px;
            height: 5px;

            margin-top: 20px;

            background-image: $purpleToRed;
        }
    }

    @media (--desktop) {
        font-size: 30px;
    }
}

.pullout-text {
    font-size: 18px;
    line-height: 1.4em;
    letter-spacing: 0;
    font-weight: $mediumWeight;

    @media (--desktop) {
        font-size: 20px;
    }
}

.paragraph {
    font-size: 16px;
    line-height: 1.625em;
    letter-spacing: 0;
    font-weight: $regularWeight;

    b,
    strong {
        font-weight: $mediumWeight;
    }

    i,
    em {
        font-style: italic;
    }

    a {
        color: $purple;
        font-weight: $mediumWeight;
        transition: color 0.2s linear, border-bottom 0.2s linear;

        border-bottom: $lightGrey;

        &:hover,
		&.styleguide-hover {
            color: $mutedRed;
            border-bottom: $mutedRed;
        }

        &:visited {
            color: $brandRed;

            .staff & {
                color: $purple;
                &:hover {
                    color: $mutedRed;
                    border-bottom: $mutedRed;
                }
            }
        }
    }
}

.small-header {
    font-size: 18px;
    line-height: 1.2em;
    letter-spacing: 0;
    font-weight: $boldWeight;
}

.small-title {
    font-size: 14px;
    line-height: 0.94em;
    letter-spacing: 0;
    font-weight: $boldWeight;
}

.small-text {
    font-size: 14px;
    font-weight: $regularWeight;
    line-height: 1.4em;
    letter-spacing: 0;

    a {
        color: inherit;
    }

    &--results {
        color: $darkestGrey;
    }

    &--desktop-hide {
        @media (--desktop) {
            display: none;
        }
    }

    &--desktop-show {
        display: none;
        @media (--desktop) {
            display: inline-block;
        }
    }
}

.text-category {
    font-size: 22px;
    line-height: 1.3;
    font-weight: $boldWeight;

    strong {
        font-size: 18px;
    }

    @media (--tablet) {
        font-size: 30px;
    }
}

.page-publish-date {
    display: inline-block;
    font-size: (14/16) + rem;
    color: $darkestGrey;
}

.caption {
    font-size: 12px;
    line-height: 1.125em;
    letter-spacing: 0;
    font-weight: $regularWeight;

    @media (--desktop) {
        font-size: 14px;
    }

    @media (--wide) {
        font-size: 16px;
    }
}

.quote {
    font-size: 20px;
    line-height: 1.2em;
    letter-spacing: 0;
    font-weight: $mediumWeight;
    font-style: italic;

    @media (--desktop) {
        font-size: 30px;
    }

    &__author {
        display: block;

        margin-top: 30px;

        &:before {
            content: '';
            display: block;
            width: 40px;
            height: 5px;

            background-color: $darkGrey;

            margin-bottom: 30px;
        }

        @media (--desktop) {
            margin-top: 40px;

            &:before {
                margin-bottom: 40px;
            }
        }
    }

    &__author-name {
        display: block;
        font-size: 18px;
        line-height: 0.94em;
        letter-spacing: 0;
        font-weight: $boldWeight;
        font-style: normal;
    }

    &__author-title {
        display: block;
        margin-top: 10px;
        font-size: 13px;
        line-height: 0.94em;
        font-weight: $regularWeight;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: (100 / 1000) * 1em;
    }
    &__author-subtitle {
        display: block;
        margin-top: 8px;
        font-size: 10px;
        line-height: 0.94em;
        font-weight: $regularWeight;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: (100 / 1000) * 1em;
        opacity: 0.6;
    }

    &--students-say {
        position: relative;
        padding: 30px 40px 40px 35px;
        font-style: normal;
        background-color: $lightestGrey;

        &::before {
            content: '“';
            display: block;
            position: relative;
            font-size: 95px;
            margin-top: 15px;
            line-height: 0.4;
            color: transparentize($purple, 0.7);
        }

        p:not(.pullout-text):not(.small-text) {
            font-weight: $mediumWeight;
            font-style: normal;
        }
    }
}

.numbered-list {
    display: block;
    position: relative;

    font-size: 18px;

    &__item {
        position: relative;

        @extend .paragraph;

        // font-size: 18px;
        // line-height: 0.94em;
        // letter-spacing: 0;
        // font-weight: $boldWeight;

        color: $darkestGrey;

        margin-left: 20px;
        padding-left: 20px;
    }
}

.list {
    $block: '.list';

    display: block;
    position: relative;

    list-style-type: square;

    &__item {
        position: relative;

        @extend .paragraph;

        color: $darkestGrey;

        margin-left: 20px;
        padding-left: 20px;
    }

    &__item-title {
        display: block;
        font-weight: $mediumWeight;
        color: $dark;
    }

    &--expanded {
        @include reset-list();

        #{$block}__item {
            position: relative;
            margin: 0;
            padding-left: 25px;

            &::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 0;
                width: 6px;
                height: 6px;
                background-color: $darkGrey;
            }
        }

        #{$block}__item + #{$block}__item {
            margin-top: 20px;
        }
    }
}

.media-title {
    font-size: 32/16 + rem;
    line-height: 30/32 + em;
    font-weight: $boldWeight;

    @media (--tablet) {
        font-size: 40/16 + rem;
    }

    @media (--desktop) {
        font-size: 48/16 + rem;
    }
}

.nav-item {
    $block: '.nav-item';

    display: inline-block;
    font-size: 30px;
    font-weight: $boldWeight;
    line-height: 1em;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;

    color: $white;

    cursor: pointer;

    &__icon {
        display: inline-block;
        width: 0.7em;
        height: 0.7em;
        margin-left: -0.1em;

        vertical-align: baseline;

        fill: $white;
        pointer-events: none;
    }

    @media (--tablet) {
        font-size: 48px;
    }

    @media (--desktop) {
        font-size: 70px;
    }

    @media (--wide) {
        font-size: 90px;
    }

    &.is-active,
    &:hover {
        #{$block} {
            &__icon {
                fill: $mutedRed;
            }
        }

        color: $mutedRed;

        .webkit-textfill & {
            background-image: $purpleToRed;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
        }
    }
}

.nav-subitem {
    $block: '.nav-subitem';

    font-size: 18px;
    font-weight: $regularWeight;
    line-height: 1em;
    letter-spacing: 0;
    text-decoration: none;

    cursor: pointer;

    transition: color 0.2s linear;

    @media (--tablet) {
        font-size: 20px;
    }

    @media (--desktop) {
        font-size: 20px;
    }

    @media (--wide) {
        font-size: 26px;
    }
}

.breadcrumb {
    $block: '.breadcrumb';

    display: inline-block;

    font-size: 0;

    color: $darkGrey;

    .theme-light & {
        color: $light;
    }

    &__icon {
        width: 15px;
        height: 15px;

        fill: currentColor;

        margin-bottom: -3px;
    }

    &__item,
    &__divider {
        font-size: 12px;
        font-weight: $regularWeight;
        color: currentColor;
    }

    a#{$block}__item {
        font-weight: $mediumWeight;
        text-decoration: none;
    }

    &__divider {
        &:before {
            content: '/';
            margin-left: 7px;
            margin-right: 7px;
        }
    }

    &--underlined {
        color: $darkestGrey;
        #{$block}__item {
            &:not(:last-child) {
                font-weight: $regularWeight;
                text-decoration: underline;
            }
        }
    }
}

.detached-link {
	font-weight:$mediumWeight;
	color: $purple;
	text-decoration: none;

	&:hover,
	&.styleguide-hover {
		color: $mutedRed;
	}

	&__icon {
		fill: currentColor;
        height: 0.6em;

        &--large{
            height: 1.2em;
            margin-bottom:-0.2em;
            margin-left:4px;
        }
	}

}

hr {
    display: block;
    position: relative;

    width: 100%;
    height: 1px;

    background-color: $grey;

    @extend .margin-rg;
    @extend .container;
}

.preformatted {
    white-space: pre-wrap;
}

.richtext {
    $block: '.richtext';

    & + & {
        @extend .margin-top-rg;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li {
        @extend .margin-top-rg;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    li,
    img,
    table {
        &:first-child {
            margin-top: 0;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    h2 {
        @extend .section-header;
        @extend .margin-top-lg;
        color: $purple;

        .staff &,
        .student &,
        .information & {
            @extend .section-subheader;
        }
    }

    h3 {
        @extend .section-subheader;
        @extend .section-subheader--spacer;

        @extend .margin-top-lg;
        font-size: 21px;
        color: $black;
    }

    h4,
    .medium-title {
        @extend .small-header;
        @extend .margin-top-xl;

        &::after {
            content: normal;
        }

        color: $black;

        &.purple {
            color: $purple;
            text-decoration: none;
        }
    }

    h5 {
        font-size: 16/16 + rem;
        font-weight: $boldWeight;
        color: $darkestGrey;
    }

    h6 {
        font-size: 16/16 + rem;
        font-weight: $mediumWeight;
        color: $darkestGrey;
    }

    p:not(.pullout-text):not(.small-text) {
        @extend .paragraph;
    }

    h2 + p,
    h3:not(.medium-title) + p {
        @extend .margin-top-md;
    }

    .pullout-text {
        @extend .margin-top-md;
        color: $light;

        p:not(.pullout-text):not(.small-text) {
            font-weight: $mediumWeight;
            font-size: 20px;
        }
    }

    .pullout-text + *:not(.pullout-text):not(img) {
        @extend .margin-top-md;
    }

    .keywords {
        color: $black;
        margin-top: 0;
        &__inline {
            display: inline-flex;
        }
    }

    .date {
        @extend .margin-top-xs;
        display: inline-block;
        font-size: 14/16 + rem;
    }

    .minor-title {
        font-size: (16/16) + rem;
        color: inherit;
    }

    .minor-title + p {
        margin-top: 0;
    }

    ul {
        @extend .list;
        @extend .margin-top-md;

        > li {
            @extend .list__item;
            @extend .margin-top-rg;

            .staff-profile & {
                color: $black;
            }
        }

        + .title-xs {
            margin-top: 35px;
        }
    }

    h4 + ul,
    h4 + .title-sm {
        @extend .margin-top-rg;
    }

    ol {
        @extend .numbered-list;
        @extend .margin-top-lg;

        > li {
            @extend .numbered-list__item;
            @extend .margin-top-rg;
        }
    }

    h5,
    h6 {
        @extend .margin-top-md;
    }

    .horizontal-scroll {
        @extend .margin-top-md;

        table {
            margin-top: 0;
        }
    }

    & + .button {
        @extend .margin-top-md;
    }

    img {
        margin-top: map-get($spaces,xl)+px;
        display: block;
        position: relative;
        width: 100%;
        margin-left: 0;
        height: auto;

        @media (--tablet) {
            margin-top: map-get($spaces,xxl)+px;
            width: 100% * 14/12;
            margin-left: -100% * 1/12;
        }

        @media (--wide) {
            margin-top: map-get($spaces,xxxl)+px;
        }
    }

    iframe {
        width: 100%;
    }

    .title-l {
        font-size: 22px;

        &::after {
            margin-top: 15px;
        }

        + .title-xs,
        + .bordered-box {
            margin-top: 35px;
        }
    }

    .title-xs {
        font-size: inherit;
        margin: 20px 0 0;

        + p {
            margin-top: 0;
        }
    }

    .bordered-box {
        border: 2px solid $grey;
        padding: 20px 25px;

        @media (--tablet) {
            margin-left: -25px;
            margin-right: -25px;
        }

        margin-top: 20px;
    }
}


p, table {
    a {
        color: $purple;
        font-weight: $mediumWeight;
        transition: color 0.2s linear, border-bottom 0.2s linear;
        border-bottom: $lightGrey;

        &:hover,
        &.styleguide-hover {
            color: $mutedRed;
            border-bottom: $mutedRed;
        }

        &:visited {
            color: $brandRed;

            .staff & {
                color: $purple;

                &:hover {
                    color: $mutedRed;
                    border-bottom: $mutedRed;
                }
            }
        }
    }
}



// WEBPACK FOOTER //
// webpack:///app/general/sass/C:/TeamCityAgents/01/work/ESSEX_PROD/Web/assets/app/general/sass/modules/typography.scss

/* === story-card END=== */



/* === course-search-card START=== */

.course-search-card {
    $block: '.course-search-card';
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid $grey;
    border-bottom: none;
    background-color: $white;
    text-decoration: none;

    &::after {
        content: '';
        position: absolute;
        left: -1px;
        right: -1px;
        bottom: 0;
        height: 3px;
        background: $purpleToRed;
    }

    &:hover {
        #{$block} {
            &__header {
                background-color: $white;
            }

            &__content {
                background-color: $lightestGrey;
            }
        }
    }

    &__header {
        padding: 15px 55px 15px 20px;
        background-color: $lightestGrey;
        transition: background-color 0.3s linear;
    }

    &__caption {
        font-size: 12/16 + rem;
        font-weight: $boldWeight;

        text-transform: uppercase;
    }

    &__title {
        font-weight: $boldWeight;
        font-size: (18/16) + rem;
        line-height: 1.2;
    }

    &__info {
        font-size: (12/16) + rem;
        color: $light;
    }

    &__figure {
        display: none;
        position: relative;
        width: 80px;
        margin: 0 15px 15px 0;
        flex-shrink: 0;

        @media (--tablet) {
            margin: 0 15px 0 0;
        }

        &::before {
            content: '';
            display: block;
            padding-top: 100%;
        }

        img {
            position: absolute;
            left: 0;
            top: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;
        }
    }

    &__label {
        display: block;
        position: relative;
        top: -1px;
        float: none;
        font-size: 12/16 + rem;
        font-weight: $boldWeight;
        line-height: 1.2;
        margin: 0 -1px;
        text-align: center;
        text-transform: uppercase;

        padding: 4px 10px 2px 10px;

        color: $white;
        background: $purpleToRed;

        @media (--tablet) {
            float: right;
            top: -1px;
            right: -1px;
            padding: 7px 11px 6px 11px;
            margin: 0 0 0 15px;
        }
    }

    &__content {
        position: relative;
        display: block;
        width: 100%;
        flex-shrink: 1;
        font-size: (14/16) + rem;
        padding: 15px 20px 20px 20px;
        color: $darkestGrey;

        transition: background-color 0.3s linear;

        @media (--tablet) {
            padding: 15px 55px 20px 20px;
        }
    }

    &--subject {
        @media (--tablet) {
            flex-direction: row;
        }

        #{$block}__figure {
            display: block;
            width: 100%;
            margin: 0;

            &::before {
                content: '';
                display: block;
                padding-top: 47.48%;
            }

            @media (--tablet) {
                width: 120px;

                &::before {
                    content: '';
                    display: block;
                    padding-top: 100%;
                }
            }
        }

        #{$block}__description {
            margin: 5px 0 0;
        }
    }

    &--labeled {
        #{$block}__header {
            padding: 0;
        }

        #{$block}__title {
            padding: 15px 20px;
        }
    }
}

.info-box {
    @include cf();
    width: 100%;

    &__item {
        display: inline-block;
        width: 50%;
        float: left;
        margin-bottom: 15px;
        padding-right: 10px;

        @media (--tablet) {
            width: 33.333%;
            margin-bottom: 0;
            padding-right: 0;
        }

        &:empty {
            margin: 0;
        }
    }

    &__item-label {
        display: inline-block;
        font-weight: $mediumWeight;
        margin-bottom: 5px;
    }
}



// WEBPACK FOOTER //
// webpack:///app/components/course-search-card/sass/C:/TeamCityAgents/01/work/ESSEX_PROD/Web/assets/app/components/course-search-card/sass/modules/course-search-card.scss





/* === course-search-card END=== */



/* === story-card END=== */



/* === story-card END=== */



/* === story-card END=== */