.demo-layout-transparent {
	background: url('../assets/demos/transparent.jpg') center / cover;
}

.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
	color: #444444;
}

.demo-layout-transparent .mdl-layout__header {

}

.mdl-layout__content {

}

.mdl-layout__content .heading-div .heading {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	text-align: center;
	color: #FFFFFF;
	padding-top: 10%;
	padding-bottom: 10%;
	margin: 0;
	background-attachment: fixed;
}


.mdl-layout__content p {
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	margin-bottom: 0%;
	color: #444444;
}

.mdl-layout__content p .bulleted-list {
	color: #444444;
}

.mdl-layout__content .emphasis-1-paragraph {
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	color: #444444;
	background-color: #F4F4F4;
	margin-bottom: 0%;
}

.mdl-layout__content .emphasis-2-paragraph {
	padding-left: 1%;
	padding-right: 1%;
	padding-top: 1%;
	padding-bottom: 1%;
	color: #000000;
	background-color: #4da0f4;
	margin-bottom: 0%;
}

.mdl-layout__content .emphasis-2-paragraph a {
	color: #0000ff
}

.mdl-layout__content .tri-image {
	padding-left: 1.5%;
	padding-right: 1.5%%;
	padding-bottom: 1.5%;
	padding-top: 1.5%;
}

.mdl-collapse.mdl-collapse--opened {
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	margin-top: -1px;
}

.mdl-collapse.mdl-collapse--opened + .mdl-collapse.mdl-collapse--opened {
	border-top: none;
	margin-top: 0;
}

.mdl-collapse .mdl-collapse__content-wrapper {
	overflow: hidden;
}

.mdl-collapse .mdl-collapse__content {
	transition-property: margin-top;
	transition-duration: 0.2s;
}

.mdl-collapse .mdl-collapse__icon {
	transition-property: transform;
	transition-duration: 0.2s;
	color: rgba(0,0,0,0.3);

	/* MDL should provide some facility for positioning icons inside list items so I don't have to do this */
	position: absolute;
	right: 6px;
	margin-top: -3px;
}

.mdl-collapse.mdl-collapse--opened .mdl-collapse__icon {
	transform: rotate(-180deg);
}

.mdl-collapse.mdl-collapse--opened .mdl-collapse__button {
	color: #4ea0f4;
}

.mdl-collapse.mdl-collapse--opened .mdl-collapse__content {
	margin-top: 0 !important;
}
