/******************************************************************************
**
** GLOBAL STYLES FOR SEMARCHY
**
** We first start with styles 
** for Mobile, then we override
** for Laptop and Tablet (> 768px)
**
** May 2018
**
*******************************************************************************
*/

/*
** 0. WE ASSUME SITE WIDTH WILL BE 984 PX
**
*/

.site-width  {
	box-sizing: content-box;
	max-width: 984px;
	margin: 0 auto 0 auto;
}

/*================================
** 1. TYPOGRAPHY
**================================
*/

/* Standard font for all. */
body, div{	
	font-family: Roboto, arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 22px;

}

strong {
	font-weight:500;
}

/* hyperlinks: no decoration */
a {
	text-decoration: none;
}


/* headers: h1 and h2 use a different font */
h1, h2 {
	font-family: 'Roboto Slab', palatino, serif;
}

h1 {
	font-size: 28px;
	font-weight: 300;
	letter-spacing: -0.2px;
	line-height: 38px;
}

h2 {
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -0.1px;
	line-height: 28px;
}

h3 {
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
}

h4 {
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;	
	line-height: 20px;
	text-transform: uppercase;
}

h5, h6 {
	/* We will almost never use these styles */
	font-size: 14px;
	font-weight: 500;
}
blockquote {
	font-family: 'Roboto Slab', palatino, serif;
	font-size: 22px;
	font-weight: 300;
	letter-spacing: -0.1px;
	line-height: 28px;
}

cite {
	font-style:normal;
}

caption {
	font-size: 15px;
}

code, pre {
	font-family: Consolas, Courier;
}

thead {
	background: #f5f5f5
}
th {
	font-weight:500;
}

td, th{
	padding: 5px;
	font-size: 14px;
	line-height: 18px;
	vertical-align: top;
}


/*
** Special Typography Classes
*/
.font-large{
	/* large font on mobile is same as standard font*/
	/* this is kept here for doc puposes */
	font-size: 16px;
	line-height: 22px;
	margin-bottom:30px;
}

.font-small{
	font-size: 14px;
	font-weight:400;
	line-height: 20px;
	margin-bottom:15px;
}


/*================================
** 2. MARGINS
**================================
*/

/* container margins should be set to zero by default */
body, div, span, table, iframe, object, var {
	margin: 0px;
}

em, strong, strike, a,
p, li, ul, ol ,
h1, h2, h3, h4, h5, h6,
tbody, td, tfoot, th, thead, tr, tt,
blockquote, cite, code, pre {
	margin-bottom:30px;
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
}

p:last-child {
	margin-bottom:0px;
}

pre {
	padding: 5px 10px; 
}
/* Bottom margins are re adjusted for bullet points and numbered lists */
li, ul > ol, ol > ol, ol > ul, ul > ul {
	margin-bottom:5px;
}

blockquote {
	margin-bottom:0;	
}

blockquote+cite {
	display:block;
	margin-top:25px;
}

/*================================
** 3. TEXT COLORS
**================================
*/
/*-- normal colors --*/
body {
	color: #848484;
}

h1, h2, h3, h5, h6, blockquote {
	color: #444444;
}

a, a:visited {
	color: #448AFF;
	cursor: pointer;
}

a:hover, a:active, a:focus{
	color: #2962FF;
}

a.card-content,
a.card-content:visited,
a.card-content:hover,
a.card-content:active,
a.card-content:focus ,
a.list-inner-content ,
a.list-inner-content :visited,
a.list-inner-content :hover,
a.list-inner-content :active,
a.list-inner-content :focus {
	color: #848484;
}

a.card-content h3,
a.list-inner-content h3{
	color: #444444;
}

/* dark sections */
.section-dark, .section-dark >*{
	color: white;
}
.section-dark h1, .section-dark h2, 
.section-dark h3, .section-dark h5, 
.section-dark h6, .section-dark blockquote{
	color: white;
}

.section-dark a , .section-dark  a:visited {
	color: white;
}

.section-dark a:hover, 
.section-dark a:active, 
.section-dark a:focus {
	color: rgba(255,255,255,0.7);
}

.section-dark thead {
	background: rgba(255, 255, 255, .2);
}

.section-dark .card-content h1, 
.section-dark .card-content h2, 
.section-dark .card-content h3, 
.section-dark .card-content h5, 
.section-dark .card-content h6, 
.section-dark .card-content p {
	color: #444444;
}

.section-dark .card-content,
.section-dark  a.card-content{
	color: #848484;
}

.section-dark .card  a.action-link, 
.section-dark .card  a.action-link:visited {
	color: #448AFF;
	cursor: pointer;
}

.section-dark .card  a.action-link:hover, 
.section-dark .card a.action-link:active, 
.section-dark .card a.action-link:focus{
	color: #2962FF;
}

.section-dark .list-inner-content h1, 
.section-dark .list-inner-content h2, 
.section-dark .list-inner-content h3, 
.section-dark .list-inner-content h5, 
.section-dark .list-inner-content h6, 
.section-dark .list-inner-content p {
	color: #444444;
}

.section-dark .list-content,
.section-dark  a.list-content{
	color: #848484;
}

.section-dark .list-content  a.action-link, 
.section-dark .list-content  a.action-link:visited {
	color: #448AFF;
	cursor: pointer;
}

.section-dark .list-content  a.action-link:hover, 
.section-dark .list-content a.action-link:active, 
.section-dark .list-content a.action-link:focus{
	color: #2962FF;
}
/*****************************************************************************
**
** LAYOUTING CLASSES
**
**
******************************************************************************
*/

/* -- Content margins -- Apply to mobile only */
.section-content {
	margin-left:20px;
	margin-right:20px;
}

/****************************************************************************
**
** MARGINS ADJUSTMENTS OVER 984px + (2 x 20px) (OVER SITE WIDTH)
** --> RESET MARGINS TO 0 (site width is here to help)...
***************************************************************************
*/
@media only screen and (min-width: 1024px) {
	.section-content {
		margin-left:0px;
		margin-right:0px;
	}
}

/* Basic section */
.section {
	padding-top:44px;
	padding-bottom: 44px;
	margin-bottom:0px;
	position: relative;
}

/* centered text section */
.section-centered {
	text-align: center;
}


/* section sub heading to apply on h4 elements*/
.section-sub-heading{
    padding-bottom: 20px;
    position: relative;
}


.section-sub-heading:after {
    bottom: -2px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    width: 60px;
}


/****************************************************************************
 **
 ** LAPTOP AND TABLET OVERRIDES
 **
 ****************************************************************************
 */
@media only screen and (min-width: 768px) {
	/*================================
	** TYPOGRAPHY ADJUSTMENTS
	**================================
	*/
	body, div{
		line-height: 24px;
	}
	
	h1 {
		font-size: 48px;
		line-height: 58px;
	}
	
	h2 {
		font-size: 38px;
		line-height: 48px;
	}
	h3{
		font-size: 22px;
		line-height: 30px;
	}
	h4{
		font-size: 16px;
		line-height: 22px;
	}
	blockquote {
		font-size: 34px;
		line-height: 44px;
	}
	

	/*================================
	** MARGINS ADJUSTMENS
	**================================
	*/
	em, strong, strike, a,
	p, ul, ol ,
	h1, h2, h3, h4, h5, h6,
	tbody, td, tfoot, th, thead, tr, tt,
	blockquote, cite, code, pre {
		margin-bottom:20px;
	}
	
	p:last-child {
		margin-bottom:0px;
	}
	
	li, ul > ol, ol > ol, ol > ul, ul > ul {
		margin-bottom: 3px;
	}
	

	h1, h2 {
		margin-bottom: 25px;	
	}
	h3 {
		margin-bottom: 20px;
	}
	h4 {
		margin-bottom: 35px;
	}
	blockquote+cite {
		margin-top:20px;
	}
	
	/*
	** Special Typography Classes
	*/
	
	.font-large{
		font-size: 18px;
		line-height: 24px;
		margin-bottom:25px;
	}
	.font-small{
		font-size: 14px;
		font-weight:400;
		line-height: 22px;
		margin-bottom:15px;
	}

}



/*
**=========================================
**
** COLORS SEMANTICS
**
**==========================================
*/

/*
** Background Colors
** 9 Colors are allowed for sections
** background:
** white, light-grey, grey, blue, light-blue, 
** green, yellow, orange and red 
*/
.white		{background-color: #FFFFFF;}
.light-grey	{background-color: #F5F5F5;}
.grey		{background-color: #757575;}
.dark-blue	{background-color: #01579B;}
.blue		{background-color: #448AFF;}
.light-blue	{background-color: #00B0FF;}
.green		{background-color: #7CB342;}
.yellow		{background-color: #F9A825;}
.orange		{background-color: #FF6D00;}
.red		{background-color: #FF5252;}


/* section subheading decoration colors */
.section-sub-heading.border-white:after 		{background-color: #FFFFFF;}
.section-sub-heading.border-light-grey:after{background-color: #F5F5F5;}
.section-sub-heading.border-grey:after		{background-color: #757575;}
.section-sub-heading.border-dark-blue:after	{background-color: #01579B;}
.section-sub-heading.border-blue:after		{background-color: #448AFF;}
.section-sub-heading.border-light-blue:after{background-color: #00B0FF;}
.section-sub-heading.border-green:after		{background-color: #7CB342;}
.section-sub-heading.border-yellow:after	{background-color: #F9A825;}
.section-sub-heading.border-orange:after	{background-color: #FF6D00;}
.section-sub-heading.border-red:after		{background-color: #FF5252;}


/*
**========================================
** BUTTONS and FAB BUTTONS
**========================================
*/
a.action-link {
	text-transform: uppercase;
}
a.action-link > i {
	margin-left:8px;
}

.button, a.button, .fab-button, a.fab-button {
	/* default buttons are blue */
	font-family: Roboto,arial,sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: .5px;
	line-height: 48px;
	background: #448AFF;
	color: #FFFFFF;
}
/* sizing normal buttons */
.button, a.button {
	/* default buttons are blue */
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;

	border: none;
	border-radius: 2px;
	height: 48px;
	padding: 0 24px;

	min-width:92px;

}

/* sizing FAB button */
.fab-button, a.fab-button {
	border-radius: 50%;

	height: 56px;
	width: 56px;
	line-height: 54px;

	margin: auto;
	padding:0;
	overflow: hidden;
	position: relative;
	display: inline-block;
	text-align: center;
}

a.button > i.material-icons {
	/* button icon (using material-design fonts)*/
	font-size: 24px;
	margin-left:6px;
}

a.button > i.mdi {
	/* button icon (using material-design fonts)*/
	font-size: 24px;
	margin-left:6px;
}

a.fab-button > i.mdi {
	font-size: 24px;
}

a.button > i, a.fab-button  > i{vertical-align: middle;}
a.button > svg, a.fab-button > svg {vertical-align: middle;}

/* defaul focus and hover */
.button:hover, .button:focus, a.button:hover, a.button:focus,
.fab-button:hover, .fab-button:focus, a.fab-button:hover, a.fab-button:focus  {
	background: #2962FF;
}

/* raised buttons */
.button.raised, a.button.raised {
	box-shadow: 
		0 2px 2px 0 rgba(0,0,0,.14), 
		0 3px 1px -2px rgba(0,0,0,.2), 
		0 1px 5px 0 rgba(0,0,0,.12);
}

.fab-button.raised, a.fab-button.raised{
	box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* button color variations */
.button.yellow, a.button.yellow, 
.fab-button.yellow, a.fab-button.yellow {background: #F9A825;}

.button.green, a.button.green, 
.fab-button.green, a.fab-button.green {background: #00C853;}

.button.white, a.button.white, 
.fab-button.white, a.fab-button.white	{background: #FFFFFF; color:#448AFF}

.button.red, a.button.red, 
.fab-button.red, a.fab-button.red {background: #ff5252;}

a.button svg path, a.fab-button svg path {fill: #FFFFFF;}

a.button.white svg path, a.fab-button.white svg path {fill: #448AFF;}


.button.yellow:hover, .button.yellow:focus, 
a.button.yellow:hover, a.button.yellow:focus,
.fab-button.yellow:hover, .fab-button.yellow:focus, 
a.fab-button.yellow:hover, a.fab-button.yellow:focus {background: #FDD835;}

.button.green:hover, .button.green:focus, 
a.button.green:hover, a.button.green:focus ,
.fab-button.green:hover, .fab-button.green:focus, 
a.fab-button.green:hover, a.fab-button.green:focus {background: #43A047;}

.button.red:hover, .button.red:focus, 
a.button.red:hover, a.button.red:focus ,
.fab-button.red:hover, .fab-button.red:focus, 
a.fab-button.red:hover, a.fab-button.red:focus {background: #D50000;}

.button.white:hover, .button.white:focus, 
a.button.white:hover, a.button.white:focus ,
.fab-button.white:hover, .fab-button.white:focus, 
a.fab-button.white:hover, 
a.fab-button.white:focus {color: #2962FF;background: #f5f5f5;}

.button.white:hover svg path, .button.white:focus svg path,
.fab-button.white:hover  svg path, .fab-button.white:focus svg path{fill: #2962FF;}

/*****************************************************************************
**
** IMAGES -- USED AS BACKROUND IMAGES ON div
** Intended usage:
** <div class="background-image [scaling] [position]" style="background-image:url('...');>
** </div>
** where:
** [scaling]:: fit | fill
** [position]:: top-left | top-right | top-center |
**              center-left | center-right | center-center
**              bottom-left | bottom-right | bottom-center
**
*******************************************************************************
*/
.background-image {
	background-position: center center;
  background-repeat: no-repeat;
	width:100%;
	height:100%;
}

.background-image.fit {background-size: contain;}

.background-image.fill {	background-size: cover;}

.background-image.top-left {background-position: top left;}
.background-image.top-right {background-position: top right;}
.background-image.top-center{background-position: top center;}
.background-image.bottom-left {	background-position: bottom left;}
.background-image.bottom-right {	background-position: bottom right;}
.background-image.bottom-center{background-position: bottom center;}
.background-image.center-left {background-position: center left;}
.background-image.center-right {	background-position: center right;}
.background-image.center-center{background-position: center center;}



/*****************************************************************************
**
** CARDS
** Intended usage:
** <div class="card">
**   <div class="card-image|card-logo">
**     <div class="background-image fit|fill...></div>
**   </div>
**   <a class="fab-button"...></a>
**   <div class="card-image|card-logo">
**     <h3>Title</h3>
**     <p class="topic">Topic</p>
**     <p>Description paragraph</p>
**   </div>
**   <a class="action-link|button"...></a>
** </div>
**
*******************************************************************************
*/
.card {
	background-color: #FFFFFF;

	display:flex;
	flex-flow: column;

	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px;

	/* ie specific properties */
	/* Will be unset later */
	/*min-width:300px;*/
	/*max-width: 300px;*/
	/*margin-bottom: 20px;*/
	
	/*
	* This property is important to make sure we can position
	* children in absolute way on top of the card (fab buttons for example)
	*/
	position: relative;
	/* margin-bottom: 20px;*/
}


/* Add initial shadow to card */
.card{
	box-shadow: 
		0 1px 1px 0 rgba(0,0,0,.14), 
		0 2px 1px -2px rgba(0,0,0,.2), 
		0 1px 3px 0 rgba(0,0,0,.12);
}
/* Set behavior on hover */
.card:hover{
	box-shadow: 
		0 2px 2px 0 rgba(0,0,0,.14), 
		0 4px 20px -2px rgba(0,0,0,.2), 
		0 2px 5px 0 rgba(0,0,0,.12);
}

/*
**
**	CARD IMAGE (Cover image)
**
*/
.card-image {
	display: flex;
	overflow: hidden;

	/* setting min and max height 
	** is as important as setting height.
	** It prevents flex from shrinking this area
	*/
	height: 175px;
	min-height: 175px;
	max-height: 175px;
	
	position: relative;
	align-items:center;
	justify-content:center;
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
**
**	CARD LOGO (image surrounded with padding)
**
*/
.card-logo {
	display: flex;
	overflow: hidden;

	/* setting min and max height 
	** is as important as setting height.
	** It prevents flex from shrinking this area
	*/
	height: 114px;
	min-height: 114px;
	max-height: 114px;
	padding: 30px;
	
	position: relative;
	align-items:center;
	justify-content:center;

	border-top-left-radius:2px;
	border-top-right-radius:2px;

	border-bottom: 1px solid #F0F0F0;
}

.card .card-logo:last-child {
	/* do not add border under logo 
	** if it is the last one in the card 
	** (only logo is displayed
	*/
	border-bottom: 0px;
}

.card .card-logo img {

	width: 100%;
	height: 100%;
	object-fit: contain; 
}


/* allow use of <a> tags for images: romve margins */
a.card-logo, a.card-image {
	margin:0px;
}

/*
**
**	FAB BUTTON 
**  Displayed at the top of the card over the image if any.
**  Otherwise, displayed inline in the card
**  Fab buttons on cards inherit from standard fab button
**  but they are smaller and positioned absolute.
**
*/
.card .fab-button  {
	height: 50px;
	min-height:50px;
	max-height:50px;
	width: 50px;
	min-width:50px;
	max-width:50px;
	line-height:50px;
	z-index: 5;
	margin:0px;
}

.card .card-image+.fab-button ,
.card .card-logo+.fab-button {
	position: absolute;
	top: 150px;
	right: 25px;
}


/* If no image is set, or if FAB button is first in the card
** then it will be displayed at the top
*/
.card .fab-button:first-child {
	margin-top: 30px;
	margin-left: 30px;
}

/*
**
**	CARD CONTENT 
**  Inner content of a card with title, topic and text.
**  Card content is set to grow or shrink according to the
**  external width set by parent containers.
**
*/
.card-content {
	/* card content will auto grow in card */
	display:block;
	overflow: hidden;
	flex: 1 1 auto;

	/* padding is set by default to 30px 
	** left and right
	*/
	padding: 0px 30px;

	/* 
	** margin is set to 72px in case there 
	** is a card action link or button.
	** It is re-adjusted if card-content
	** is the last child of the card
	*/
	margin-bottom: 72px;

}
/* margins adjustments */
.card div.card-content:last-child,
.card a.card-content:last-child{
	/* If the card content 
	** is the last child in the card,
	** reset its margin to 20px instead of 75px
	*/
	margin-bottom: 20px;
}

.card-content h3:first-child, 
.card-content p:first-child{
	/* first child in card content shoud set the top margin */
	margin-top: 20px;
}

/*
**
**	CARD CONTENT: HEADING
**
*/
.card-content h3 {
	line-height: 27px;
}
/*
**
**	CARD CONTENT: TOPIC
**
*/
.card-content p.topic {
	display: block;
	/* change typography to smaller font */
	font-size: 14px;
	font-weight:400;
	line-height: 20px;
}
/* margin adjustments for h3+topic */
.card-content h3+.topic {
	/* adjust bottom margin for title and topic when they are together */
	margin-top: -20px;
	margin-bottom: 20px;
}
/* adjust bottom margins for last elements */
.card-content h3:last-child,
.card-content p:last-child {
	margin-bottom:0px;
}
/*
**
**	CARD CONTENT: TEXT
**
*/
.card-content p{
	display:block;
	/* change typography to smaller font */
	font-size: 14px;
	font-weight:300;
	line-height: 20px;

}


/*
**
**	CARD ACTION LINK
**  Hyperlink (<a class="action-link">) is expected. Will be positioned 
**  at the bottom of the card.
**
*/
.card .action-link {
	/* link positioning:
	** set to the bottom of the card.
	** card-content should have allocated
	** 72 pixels of bottom margin
	*/
	position: absolute;
	bottom: 24px;
	left: 30px;
	margin: 0px;
	/* Typography */
	text-transform: uppercase;
	font-size: 14px;
	line-height: 24px;
}

/* Styling potential svgs and icons
** before or after the hyperlink
*/
.card .action-link > i {
  vertical-align: text-bottom;
	font-size: 20px;
	line-height: 20px;
}

.card .action-link > svg{
	margin-top: 5px;
	vertical-align: text-bottom;
}

.card .action-link  > svg path{
	fill: #448AFF;
}

.card .action-link:hover  > svg path{
	fill: #2962FF;
}

/*
**
**	CARD ACTION BUTTON
**  Hyperlink (<a class="button">) is expected. Will be positioned at the
**  bottom of the card.
**
*/
.card .button {
	/* button positioning:
	** set to the bottom of the card.
	** card-content should have allocated
	** 72 pixels of bottom margin
	*/
	position: absolute;
	bottom: 18px;
	left: 30px;
	margin: 0px;
	
	/* Special button for cards: */
 	min-width: 72px;
	padding: 0px  12px;
	height: 36px;

	/* typography */
	line-height: 34px;
	font-size: 14px;
}


/*****************************************************************************
**
** LIST ITEM
** Intended usage:
** <div class="list-item">
**   <div class="list-avatar">
**     <div class="background-image fit|fill...></div>
**			OR
**		 <i class="mdi mdi-[icon_name]"></i>
**   </div>
**	 <div class="list-content>
**		<div class="list-inner-content">
**			<h3>..</h3>
**			<p class=topic>...</p>
**			<p>...</p>
**		</div>
**		<a class="button">...</a>
**	 </div>
** </div>
**
*******************************************************************************
*/
.list {
	margin-bottom: 20px;
}

.list.box-shadow {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px;
	box-shadow: 
		0 1px 1px 0 rgba(0,0,0,.14), 
		0 2px 1px -2px rgba(0,0,0,.2), 
		0 1px 3px 0 rgba(0,0,0,.12);
}

.list .list-item {
	margin-bottom: 0px;
}

.list > .list-item.box-shadow{
	margin-bottom: 20px;
}

.list-item, .list-item:focus, .list-item:visited {
	background-color: #FFFFFF;

	display:flex;
	flex-flow: row;

	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-top-left-radius:2px;
	border-top-right-radius:2px;

	/*
	* This property is important to make sure we can position
	* children in absolute way on top of the card (fab buttons for example)
	*/
	position: relative;
	color: #848484;
	margin-bottom: 0px;
}

.list-item {
	border-bottom: 1px solid #f5f5f5;
}

.list-item:hover{
	background-color: #f5f5f5;
	color: #848484;
}

/* Add initial shadow to card */
.list-item.box-shadow{
	box-shadow: 
		0 1px 1px 0 rgba(0,0,0,.14), 
		0 2px 1px -2px rgba(0,0,0,.2), 
		0 1px 3px 0 rgba(0,0,0,.12);
}
/* Set behavior on hover */
.list-item.box-shadow:hover{
	box-shadow: 
		0 2px 2px 0 rgba(0,0,0,.14), 
		0 4px 20px -2px rgba(0,0,0,.2), 
		0 2px 5px 0 rgba(0,0,0,.12);
	background: 0;
	color: #848484;
}


.list-avatar {
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	min-width: 60px;
	max-width: 60px;
	width: 60px;
	min-height: 60px;
	max-height: 60px;
	height: 60px;
	margin: 20px 0px 20px 20px;
	content: ' ';
	/* In case we put some text in the avatar */
	text-align: center;
	line-height:60px;
	
	font-family: Roboto, arial, sans-serif;
	font-size: 30px;
	font-weight: 500;
	
	border-radius: 50%;
}

.list-avatar.square{
	border-radius: 0;
}

.list-avatar, .list-avatar.white, .list-avatar.light-grey{color: #444444;}
.list-avatar svg path, .list-avatar.white svg path, 
.list-avatar.light-grey svg path{fill: #444444;}

.list-avatar.grey, .list-avatar.dark-blue, .list-avatar.blue, 
.list-avatar.light-blue, .list-avatar.green, .list-avatar.yellow,
.list-avatar.orange, .list-avatar.red{color: #ffffff;}

.list-avatar.grey svg path, .list-avatar.dark-blue svg path, .list-avatar.blue svg path, 
.list-avatar.light-blue svg path, .list-avatar.green svg path, .list-avatar.yellow svg path,
.list-avatar.orange svg path, .list-avatar.red svg path{fill: #ffffff;}



/*
**
**	LIST ITEM CONTENT 
**  Inner content of a card with title, topic and text.
**  Card content is set to grow or shrink according to the
**  external width set by parent containers.
**
*/
.list-content {
	/* card content will auto grow in card */
	display:block;
	overflow: hidden;
	flex: 1 1 auto;

	/* padding is set by default to 30px 
	** left and right
	*/
	padding: 0px 20px;
	margin-bottom: 20px;
}

.list-content .list-inner-content h3:first-child, 
.list-content .list-inner-content p:first-child{
	/* first child in card content shoud set the top margin */
	margin-top: 20px;
}

/*
**
**	LIST CONTENT: HEADING
**
*/
.list-content .list-inner-content h3 {
	line-height: 27px;
	margin-bottom: 8px;
}
/*
**
**	LIST CONTENT: TOPIC
**
*/
.list-content .list-inner-content p.topic {
	display: block;
	/* change typography to smaller font */
	font-size: 14px;
	font-weight:400;
	line-height: 20px;
}
/* margin adjustments for h3+topic */
.list-content .list-inner-content  h3+.topic {
	/* adjust bottom margin for title and topic when they are together */
	margin-top: -8px;
	margin-bottom: 8px;
}
/* adjust bottom margins for last elements */
.list-content .list-inner-content  h3:last-child,
.list-content .list-inner-content  p:last-child {
	margin-bottom:20px;
}
/*
**
**	LIST CONTENT: TEXT
**
*/
.list-content .list-inner-content  p{
	display:block;
	/* change typography to smaller font */
	font-size: 14px;
	font-weight:300;
	line-height: 20px;

}

/*
** LIST CONTENT ACTION BUTTONS AND ACTION LINKS
*/
.list-content .button {
	margin: 0px;
	margin-right: 20px;
	
	/* Special button for cards: */
 	min-width: 72px;
	padding: 0px  12px;
	height: 36px;

	/* typography */
	line-height: 34px;
	font-size: 14px;
}
.list-content .action-link {
	margin: 0px;
	margin-right: 20px;
	/* Typography */
	text-transform: uppercase;
	font-size: 14px;
	line-height: 24px;
}

/* Styling potential svgs and icons
** before or after the hyperlink
*/
.list-content .action-link > i {
  vertical-align: text-bottom;
	font-size: 20px;
	line-height: 20px;
}

.list-content .action-link > svg{
	margin-top: 5px;
	vertical-align: text-bottom;
}

.list-content .action-link  > svg path{
	fill: #448AFF;
}

.list-content .action-link:hover  > svg path{
	fill: #2962FF;
}

/*****************************************************************************
**
**  MAIN MENU AND TOP BANNER ELEMENTS
**  
**
*******************************************************************************
*/
.header {
	background: #ffffff;
	box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
	height: 60px; 
	min-height: 60px;
	position: relative;
	margin: 0;
	z-index: 800;	
	/*border: 1px red dotted;*/
}

.header.header-is-sticky + .main {
	margin-top: 60px;
}

.header.header-is-sticky {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.upper-header {
	/* border: 1px green dotted;*/
	display:flex;
	position:relative;
	height: 60px;
	min-height:60px;
	max-height: 60px;

}

.upper-header .upper-header-logo {
	display: inline-flex;

	flex: 0 0 auto;

	margin-left: 20px;
	height:60px;
	width: 200px;
	min-height: 60px;
	max-height:60px;
	min-width: 200px;
	max-width: 200px;
	/*border: 1px green dotted;*/
	/* background-color:green; */
}

.upper-header .upper-header-content{
	display: inline-flex;
	flex: 1 1 auto;

	justify-content: flex-end;
	align-items: flex-start;
	height: 60px;
	min-height: 60px;
	max-height: 60px;
	margin:0px;
	/* background:blue; */
}

.upper-header .nav-toggle {
	display: inline-flex;
	flex: 0 0 auto;

	width: 60px;
	height:60px;
	justify-content: center;
	align-items: center;

	margin:0px;
	/* background:red;*/
}



.upper-header a.button{
	display:block;
	line-height:30px;	

	max-width:32px;
	min-width:32px;
	width:32px;
	
	max-height:32px;
	min-height:32px;
	height:32px;
	
	padding:5px;
	margin: 0px;

}
.upper-header a.button.nav-toggle-button > svg{
	display:block;
}

.main  {
	overflow-x: hidden;
	overflow-y:hidden;
}
/*=====================================
/* MENU ON MOBILE */
@media (max-width: 767px) {
	/* Styling the main menu on mobile */
	.main-nav {
		display:block;
		
		position: fixed;
		right:0;
		top:0;

		width:90%;
		height: 100%;

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


		background: #ffffff;
		box-shadow: 0 0 50px 100px rgba(0,0,0,.5);
		
		
	}
	.main-nav+.main {
		margin-top: 60px;
	}

	.main-nav  h1 {
		display:block;
		position:fixed;
		top:0;
		height:60px;
		width: 100%;
		font-size: 22px;
		line-height:50px;
		padding-left:20px;
		background: #ffffff;
		margin: 0;
		box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
	}

	.main-nav h1+ul {
		margin-top: 60px;
	}

	.main-nav nav {
		padding: 0px;
		margin: 0px;
	}
	.main-nav ul {
		list-style:none;
		margin: 0px;
		/* -webkit-padding-start: 10px;*/
		padding-left: 0px;
		box-sizing: border-box;
	}

	.main-nav > ul {
		/* border: 1px red solid;*/
		padding: 0px 0px 0px 0px;
	}

	.main-nav li {
		display: block;
		margin: 0px;
	}

	/* first list items in menu have no padding */
	.main-nav ul:not(.sub-nav) > li{
		padding-left: 0px;
	}

	/* Sub-menu list items have a padding of 20px (first level) */
	.main-nav ul.sub-nav > li{
		padding-left: 20px;
	}

	/* Third-level menu items are hidden on mobile */
	.main-nav ul.sub-nav > li > ul.sub-nav > li{
		display: none;
		margin-left: -20px;
		padding-left: 60px;
	}

	/* active */
	.header .main-nav ul:not(.sub-nav)>.active>a {
		background: #f6f6f6;
		border-left: 4px solid #448aff;
		font-weight: 500;
		color: #444;
	}
	.header .main-nav ul.sub-nav> li.active {
		background: #f6f6f6;
		border-left: 4px solid orange;
		font-weight: 500;
		color: #444;
	}


	.main-nav li a {
			/* menu item typography */
			color: #848484;
			text-decoration:none;
			font-weight:400;
			font-size:14px;
			line-height:18px;
	}
	.main-nav li a {
		display: block;
		margin:0px;
		padding: 20px;
		/* margin-bottom: 20px;
		margin-left: 20px;
		*/
	}

	.secondary-nav {
		display: block;
	}
	a.secondary-nav-item  {
		display:none;
	}
}
@media only screen and (min-width: 768px) {
	.header {
		height:110px;
		min-height: 60px;
		max-height: 110px;
	}
	.header.header-is-sticky + .main{
		margin-top: 110px;
	}	

	.upper-header .upper-header-logo {
		margin-left: 38px;
	}
	
	/* hide menu toggle button */
	.upper-header .nav-toggle {
		display:none;
	}
	
	.secondary-nav {
		background: white;
		height:24px;
	}

	a.secondary-nav-item {
		display: inline;
		padding: 0px 16px;
		text-transform: uppercase;
		font-size: 14px;
		font-weight: 400;
		border-right: 1px solid #848484;
	}

	a.secondary-nav-item:last-child {
		border: 0;
	}

	.main-nav > h1 {
		display:none;
	}
	.main-nav {
		/* margin-top:60px; */
		position:relative;
		display: block;
		padding-left:20px;
		
		/* reset mobile nav */
		box-shadow: none;
		height: unset;
		width: unset;
		background-color: rgba(255,255,255,0.7);
		/*background: pink;*/
		/* border: 1px blue dotted;*/
		 	overflow: visible;

	}

	/* menu */
	.main-nav  ul {
		list-style:none;
/* 		position:relative;
		
		top: 0px;
		float:left;
*/
		margin:0px;
		padding:0px;
	}
	
	.main-nav ul:first-child{
		/* float:none;*/
	}
		
	/* main menu item link */
	.main-nav  ul a {
		display:block;
		/* menu item typography */
		color: #848484;
		text-decoration:none;
		font-weight:400;
		font-size:14px;
		line-height:18px;
		
		/* margins and padding for primary menu items */
		margin:0px 20px;
		padding:15px 0px;
	}

	/* buttons as main menu items */
	.main-nav  ul a.button {
		display:block;
		/* Special button for main menu*/
		min-width: 72px;
		padding: 0px  12px;
		height: 36px;
		/* typography */
		color: white;
		line-height: 34px;
		font-size: 14px;
		font-weight:400;
		/* adjust margins */
		margin:7px 20px;
	}

	.main-nav  ul li {
		position:relative;
		display: inline-block;
		margin:0;
		padding:0;
		cursor: pointer;
	}


	/* Hover on an element of main menu */
	.main-nav  ul li:hover {
		/* Do nothing */
	}

	/* hover on any link: use standard color for links */
	.main-nav  ul li a:hover {
		color: #2962FF;
	}
	/* hover on any button: use standard color for buttons */
	.main-nav  ul li a.button:hover {
		color: #ffffff;
	}

	/* any sub-menu */
	.main-nav  ul ul {
		display:none;
		/* set position of sub-menu */
		position:absolute;
		top:100%;
		left:0px;
		background:#ffffff;
		
		padding:15px;
		
		/* add a box-shadow to sub-menu */
		box-shadow: 
			0 1px 1px 0 rgba(0,0,0,.14), 
			0 2px 1px -2px rgba(0,0,0,.2), 
			0 1px 3px 0 rgba(0,0,0,.12);
		z-index: 10;
	}

	/* sub-menu elements: preven word wrapping *
	/* and set a min and max width */
	.main-nav  ul ul li {
		float:none;
		min-width:200px;
		max-width:300px;
		white-space: nowrap;
	}

	/* highlignth sub-menu elements have on hover */
	.main-nav  ul ul li:hover {
		 background:#f5f5f5;
	}

	.main-nav  ul ul a {
		line-height:120%;
		margin:0px 20px;
		padding:15px 0px;
	}

	.main-nav  ul ul ul {
		top:0;
		left:100%
	}

	.main-nav  ul li:hover > ul {
		display:block;
	}
	/* second-level sub-menu and below */
	.main-nav ul ul ul li{
		display:block;
	}
}

/*****************************************************************************
** GENERAL ALIGNMENTS
** WARNING: Semantics of these classes match the semantics of Wordpress
** Please do not change
**
*******************************************************************************
*/
.alignleft {
	float: left;
	margin: 8px 20px 8px 0px;
}

.alignright {
	float: right;
	margin: 8px 0px 8px 20px;
}

.aligncenter {
	margin: 8px auto 8px auto;
}
.alignleftblock {
	margin: 8px auto 8px 0px;
}
.alignrightblock {
	margin: 8px 0px 8px auto;
}

/*****************************************************************************
**
**  GRID LAYOUTING
**  
**
*******************************************************************************
** This is a simplified and extended version of the mdl-grid from 
** https://getmdl.io/components/index.html#layout-section/grid
** The grid is defined and enclosed by a container element. 
** A grid has 12 columns in the desktop screen size, 8 in the tablet size, 
** and 4 in the phone size, each size having predefined margins and gutters. 
** Cells are laid out sequentially in a row, in the order they are defined, 
** with some exceptions:
** If a cell doesn't fit in the row in one of the screen sizes, it flows into 
** the following line.
** If a cell has a specified column size equal to or larger than the number of 
** columns for the current screen size, it takes up the entirety of its row.
** You can set a maximum grid width, after which the grid stays centered with 
** padding on either side, by setting its max-width CSS property.
**
** example:
** <div class="grid">
**   <div class="cell cell-align-middle cell-4-col">
**     this cell will take 4 cols out of 12 on laptop (1/3 of the space)
**   </div>
**   <div class="cell cell-align-middle cell-2-col">
**     this cell will take 2 cols out of 12 on laptop (1/6 of the space)
**   </div>
** </div>
**
** We have also extended the grid system to inject a class in the container
** to get a certain number of grid items per row. This can be done by
** adding the grid-N-item class where N(1..5) indicate the maximum number of 
** items per row on a large screen. WARNING: it works only with div items.
** For example 
** <div class="grid grid-5-item">
**   <div>1</div>....<div>10</div>
** </div>
** will display 5 items per row. 
*******************************************************************************
*/

.grid {
	display:-webkit-flex;
	display:-ms-flexbox;
	display:flex;
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;
	margin:0 auto;
	-webkit-align-items:stretch;
	-ms-flex-align:stretch;
	align-items:stretch;
	
	/*padding: 8px;*/
	margin-bottom:30px;
	/* remove left and right margins added by cells */
	margin-left:-8px;
	margin-right:-8px;
}
.grid-row-small > *{	min-height: 380px;max-height: 380px;}
.grid-row-medium > *{min-height: 464px;max-height: 464px;}
.grid-row-large > *{min-height: 750px;max-height: 750px;}

.grid.grid-no-spacing>.cell{
	margin:0px;
}

.cell {
	box-sizing:border-box;
}

.grid.grid-no-spacing{
	padding: 0px;
	margin-left: 0px;
	margin-right:0px
}

.cell-align-top{
	-webkit-align-self:flex-start;
	-ms-flex-item-align:start;
	align-self:flex-start;
}

.cell-align-middle{
	-webkit-align-self:center;
	-ms-flex-item-align:center;
	-ms-grid-row-align:center;
	align-self: center;
}

.cell-align-bottom{
	-webkit-align-self:flex-end;
	-ms-flex-item-align:end;
	align-self: flex-end;
}

.cell-align-stretch{
	-webkit-align-self:stretch;
	-ms-flex-item-align:stretch;
	-ms-grid-row-align:stretch;
	align-self:stretch;
}


/* phone */
@media (max-width:479px){
	.grid {margin-bottom:20px;}
	.cell{margin:8px;	width:calc(100% - 16px);}
	.grid-no-spacing > .cell{width:100%;}
	
	.cell-1-col {width:calc(25% - 16px);}
	.cell-2-col {width:calc(50% - 16px);}
	.cell-3-col {width:calc(75% - 16px);}
	.cell-4-col {width:calc(100% - 16px);}
	.cell-5-col {width:calc(100% - 16px);}
	.cell-6-col {width:calc(100% - 16px);}
	.cell-7-col {width:calc(100% - 16px);}
	.cell-8-col {width:calc(100% - 16px);}
	.cell-9-col {width:calc(100% - 16px);}
	.cell-10-col {width:calc(100% - 16px);}
	.cell-11-col {width:calc(100% - 16px);}
	.cell-12-col {width:calc(100% - 16px);}
	
	.cell-1-offset {margin-left:calc(25% + 8px);}
	.cell-2-offset {margin-left:calc(50% + 8px);}
	.cell-3-offset {margin-left:calc(75% + 8px);}

	.grid-no-spacing > .cell-1-col  {width:25%;}
	.grid-no-spacing > .cell-2-col  {width:50%;}
	.grid-no-spacing > .cell-3-col  {width:75%;}
	.grid-no-spacing > .cell-4-col  {width:100%;}
	.grid-no-spacing > .cell-5-col  {width:100%;}
	.grid-no-spacing > .cell-6-col  {width:100%;}
	.grid-no-spacing > .cell-7-col  {width:100%;}
	.grid-no-spacing > .cell-8-col  {width:100%;}
	.grid-no-spacing > .cell-9-col  {width:100%;}
	.grid-no-spacing > .cell-10-col  {width:100%;}
	.grid-no-spacing > .cell-11-col  {width:100%;}
	.grid-no-spacing > .cell-12-col  {width:100%;}
	
	.grid-1-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-2-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-3-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-4-item > *{margin:8px;box-sizing:border-box;width:calc(50% - 16px);}
	.grid-5-item > *{margin:8px;box-sizing:border-box;width:calc(50% - 16px);}

	.grid-no-spacing.grid-1-item > *{margin:0px;box-sizing:border-box;width:100%;}
	.grid-no-spacing.grid-2-item > *{margin:0px;box-sizing:border-box;width:100%;}
	.grid-no-spacing.grid-3-item > *{margin:0px;box-sizing:border-box;width:100%}
	.grid-no-spacing.grid-4-item > *{margin:0px;box-sizing:border-box;width:50%;}
	.grid-no-spacing.grid-5-item > *{margin:0px;box-sizing:border-box;width:50%;}
	
}


/* Tablet */
@media (min-width:480px) and (max-width:839px){
	.grid {margin-bottom:20px;}
	.cell{margin:8px;width:calc(50% - 16px);}
	.grid-no-spacing > .cell{width:50%;}
	
	.cell-1-col {width:calc(12.5% - 16px);}
	.cell-2-col {width:calc(25% - 16px);}
	.cell-3-col {width:calc(37.5% - 16px);}
	.cell-4-col {width:calc(50% - 16px);}
	.cell-5-col {width:calc(62.5% - 16px);}
	.cell-6-col {width:calc(75% - 16px);}
	.cell-7-col {width:calc(87.5% - 16px);}
	.cell-8-col {width:calc(100% - 16px);}
	.cell-9-col {width:calc(100% - 16px);}
	.cell-10-col {width:calc(100% - 16px);}
	.cell-11-col {width:calc(100% - 16px);}
	.cell-12-col {width:calc(100% - 16px);}

	.cell-1-offset {margin-left:calc(12.5% + 8px);}
	.cell-2-offset {margin-left:calc(25% + 8px);}
	.cell-3-offset {margin-left:calc(37.5% + 8px);}
	.cell-4-offset {margin-left:calc(50% + 8px);}
	.cell-5-offset {margin-left:calc(62.5% + 8px);}
	.cell-6-offset {margin-left:calc(75% + 8px);}

	.grid-no-spacing > .cell-1-col  {width:12.5%;}
	.grid-no-spacing > .cell-2-col  {width:25%;}
	.grid-no-spacing > .cell-3-col  {width:37.5%;}
	.grid-no-spacing > .cell-4-col  {width:50%;}
	.grid-no-spacing > .cell-5-col  {width:62.5%;}
	.grid-no-spacing > .cell-6-col  {width:75%;}
	.grid-no-spacing > .cell-7-col  {width:87.5%;}
	.grid-no-spacing > .cell-8-col  {width:100%;}
	.grid-no-spacing > .cell-9-col  {width:100%;}
	.grid-no-spacing > .cell-10-col  {width:100%;}
	.grid-no-spacing > .cell-11-col  {width:100%;}
	.grid-no-spacing > .cell-12-col  {width:100%;}
	
	.grid-1-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-2-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-3-item > *{margin:8px;box-sizing:border-box;width:calc(50% - 16px);}
	.grid-4-item > *{margin:8px;box-sizing:border-box;width:calc(33.3333333333% - 16px);}
	.grid-5-item > *{margin:8px;box-sizing:border-box;width:calc(25% - 16px);}

	.grid-no-spacing.grid-1-item > *{margin:0px;box-sizing:border-box;width:100%;}
	.grid-no-spacing.grid-2-item > *{margin:0px;box-sizing:border-box;width:100%;}
	.grid-no-spacing.grid-3-item > *{margin:0px;box-sizing:border-box;width:50%}
	.grid-no-spacing.grid-4-item > *{margin:0px;box-sizing:border-box;width:33.3333333333%;}
	.grid-no-spacing.grid-5-item > *{margin:0px;box-sizing:border-box;width:25%;}
	
}

/* Desktop */
@media (min-width:840px){
	.cell{margin:8px;width:calc(33.3333333333% - 16px);}
	.grid-no-spacing > .cell{width:33.3333333333%;}
	
	.cell-1-col {width:calc(8.3333333333% - 16px);}
	.cell-2-col {width:calc(16.6666666667% - 16px);}
	.cell-3-col {width:calc(25% - 16px);}
	.cell-4-col {width:calc(33.3333333333% - 16px);}
	.cell-5-col {width:calc(41.6666666667% - 16px);}
	.cell-6-col {width:calc(50% - 16px);}
	.cell-7-col {width:calc(58.3333333333% - 16px);}
	.cell-8-col {width:calc(66.6666666667% - 16px);}
	.cell-9-col {width:calc(75% - 16px);}
	.cell-10-col {width:calc(83.3333333333% - 16px);}
	.cell-11-col {width:calc(91.6666666667% - 16px);}
	.cell-12-col {width:calc(100% - 16px);}
	
	.cell-1-offset {margin-left:calc(8.3333333333% + 8px);}
	.cell-2-offset {margin-left:calc(16.6666666667% + 8px);}
	.cell-3-offset {margin-left:calc(25% + 8px);}
	.cell-4-offset {margin-left:calc(33.3333333333% + 8px);}
	.cell-5-offset {margin-left:calc(41.6666666667% + 8px);}
	.cell-6-offset {margin-left:calc(50% + 8px);}
	.cell-7-offset {margin-left:calc(58.3333333333% + 8px);}
	.cell-8-offset {margin-left:calc(66.6666666667% + 8px);}
	.cell-9-offset {margin-left:calc(75% + 8px);}
	.cell-10-offset {margin-left:calc(83.3333333333% + 8px);}
	.cell-11-offset {margin-left:calc(91.6666666667% + 8px);}


	.grid-no-spacing > .cell-1-col  {width:8.3333333333%;}
	.grid-no-spacing > .cell-2-col  {width:16.6666666667%;}
	.grid-no-spacing > .cell-3-col  {width:25%;}
	.grid-no-spacing > .cell-4-col  {width:33.3333333333%;}
	.grid-no-spacing > .cell-5-col  {width:41.6666666667%;}
	.grid-no-spacing > .cell-6-col  {width:50%;}
	.grid-no-spacing > .cell-7-col  {width:58.3333333333%;}
	.grid-no-spacing > .cell-8-col  {width:66.6666666667%;}
	.grid-no-spacing > .cell-9-col  {width:75%;}
	.grid-no-spacing > .cell-10-col  {width:83.3333333333%;}
	.grid-no-spacing > .cell-11-col  {width:91.6666666667%;}
	.grid-no-spacing > .cell-12-col  {width:100%;}

	.grid-1-item > *{margin:8px;box-sizing:border-box;width:calc(100% - 16px);}
	.grid-2-item > *{margin:8px;box-sizing:border-box;width:calc(50% - 16px);}
	.grid-3-item > *{margin:8px;box-sizing:border-box;width:calc(33.3333333333% - 16px)}
	.grid-4-item > *{margin:8px;box-sizing:border-box;width:calc(25% - 16px);}
	.grid-5-item > *{margin:8px;box-sizing:border-box;width:calc(20% - 16px);}

	.grid-no-spacing.grid-1-item > *{margin:0px;box-sizing:border-box;width:100%;}
	.grid-no-spacing.grid-2-item > *{margin:0px;box-sizing:border-box;width:50%;}
	.grid-no-spacing.grid-3-item > *{margin:0px;box-sizing:border-box;width:33.3333333333%}
	.grid-no-spacing.grid-4-item > *{margin:0px;box-sizing:border-box;width:25%;}
	.grid-no-spacing.grid-5-item > *{margin:0px;box-sizing:border-box;width:20%;}

}

/*****************************************************************************
**
** PRISM SYNTAX HIGLIGHTING CSS ADJUSTMENTS
**
*******************************************************************************
*/
pre[class*="language-"] {
    padding: 20px;
    margin: 0px;
		margin-bottom: 20px;
    overflow: auto;
		overflow-wrap: break-word;
}

code[class*="language-"] {
    padding: 0px;
    margin:0px;
}


/*****************************************************************************
**
**  TEMPLATES SPECIFIC SECTIONS
**  
**
*******************************************************************************
*/
.section-article-hero {
	height:300px;
	padding-top: 44px;
	padding-bottom: 0px;
}
.article-content {
	position:relative;
	top: -210px;
	margin-bottom: -250px;
	padding: 30px 20px;
	box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -2px rgba(0,0,0,.2), 0 1px 3px 0 rgba(0,0,0,.12);
}
.article-meta {
	font-size: 14px;
}
h1+p.article-meta {
	margin-top: -20px;
	margin-bottom: 20px;
}

.article-image-box {
	/* setting min and max height 
	** is as important as setting height.
	** It prevents flex from shrinking this area
	*/
	height: 200px;
	min-height: 200px;
	max-height: 200px;
	
	border-top-left-radius:2px;
	border-top-right-radius:2px;
}
.article-image-box.logo {
	padding: 30px;
	border: #f5f5f5 solid 1px;

}

.article-image-box:hover {
	box-shadow: 
		0 1px 1px 0 rgba(0,0,0,.14), 
		0 2px 1px -2px rgba(0,0,0,.2), 
		0 1px 3px 0 rgba(0,0,0,.12);
	
}

.article-excerpt > p {
	font-family: 'Roboto Slab', palatino, serif;
	font-size: 16px;
	line-height: 22px;
	margin-bottom:30px;
	color: #444444;
}

@media only screen and (min-width: 768px) {
	.article-content {
		padding: 60px;
		margin-bottom: -200px;
	}
	.article-excerpt > p{
		font-size: 18px;
		line-height: 24px;
		margin-bottom:25px;
	}
}

/*
** Section Hero for pages 
*/
@media (max-width:839px){
	.section-hero-cell {
		margin: 0px 20px;
	}

	.section-hero-image {
		padding:0px;
		margin-bottom:-44px;
		margin-top:44px;
		position: relative;
		height:300px;
	}

}
@media (min-width:840px){
	.section-hero-image {
		padding:0px;
		margin:0px;
		bottom:0;
		top:0;
		position: absolute;
		width: 50%;
	}
}

@media (min-width: 1024px) {
	.section-hero-cell {
		width:calc(50% - 40px);
		margin-left: calc(50% + 40px);
	}
}

@media (min-width:840px) and (max-width:1023px){
	.section-hero-cell {
		width:calc(50% - 60px);
		margin-left: calc(50% + 40px);
	}
}

/*
** Section Demo for pages (50-50 sections with image)
**  
*/
.grid.grid-section-demo {
	margin-bottom: 0px;
}

@media (max-width:839px){
	.section-demo-cell { width:100%; margin: 0px 20px;}

	.section-demo-image > img {
		height:300px;
	}
}

@media (min-width:840px){
	.section-demo-cell.left  {width:calc(50% - 40px); margin-right:40px;}
	.section-demo-cell.right {width:calc(50% - 40px);  margin-left:40px;}
	
	.section-demo-image {height: auto;}
	.section-demo-image.left  > img {float:right;}
	.section-demo-image.right > img {float:left;}

	.section-demo-image.offset-top-5  > img {margin-top:calc(100% - 105%);}
	.section-demo-image.offset-top-10 > img {margin-top:calc(100% - 110%);}
	.section-demo-image.offset-top-15 > img {margin-top:calc(100% - 115%);}
	.section-demo-image.offset-top-20 > img {margin-top:calc(100% - 120%);}
	.section-demo-image.offset-top-25 > img {margin-top:calc(100% - 125%);}
	.section-demo-image.offset-top-30 > img {margin-top:calc(100% - 130%);}
	.section-demo-image.offset-top-35 > img {margin-top:calc(100% - 135%);}
	.section-demo-image.offset-top-40 > img {margin-top:calc(100% - 140%);}
}


/*****************************************************************************
**
**  ERROR PAGES
**
**
*******************************************************************************
*/
.mdl-layout {
	align-items: center;
	justify-content: center;
}
.mdl-layout__content {
	padding: 24px;
	flex: none;
}

.sem-button--fullwidth {
	width:100%;
	margin:1em auto;
}

.mdl-typography--title {
	font-family: Roboto,sans-serif;
}

.mdl-card__supporting-text {
	font-family: Roboto,sans-serif;
}

.sem-card--login > .mdl-card__title {
	color: #FFF;
	background-color:#EEE;
	height: 100px;
	min-height: 100px;
	padding: 0;
}

.sem-card--login {
}