/*MDC HOME THEME*/
body {
	background-color:var(--mdc-theme-background);
}

.hero-header {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
	padding: 1rem 0;
}

.hero-header .logo {
    width: 200px;
}

.hero-header .payoff {
    display: flex;
    flex-direction: column;
    width: 100%;
}	

.hero-header .payoff .graphic {
    margin: 0 auto;
    width: 90%;
    max-height: 50vh;
    padding: 2.5rem 0;
}	

.hero-header .payoff .txt {
    margin: 0 auto;
	text-align: center;
	color: var(--mdc-theme-primary);
	padding-bottom: 2rem;
}

.hero-header .scroll-btn {
    margin: 0 auto;
}

.cta {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    max-width: 900px;
}

.focus {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    width: 90%;
    padding: 1rem 0;
}

.focus .element {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -0.8rem;
}

.element .item {
    margin: 2rem 0;
    flex: 1 0 0%;
    padding: 0 0.8rem;
	display: flex;
}

.item .txt {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom-color: #abb2c9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.txt .title {
    color: var(--mdc-theme-primary);
}

.item .graphic {
    max-width: 300px;
	margin: 0 auto;
}

.element .separator {
    flex: 1 0 0%;
    padding: 0 0.8rem;
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

.video {
    background-color: var(--mdc-theme-secondary);
    padding: 3rem 0;
}

.video .txt {
	margin: 0 auto;
    text-align: center;
    color: var(--mdc-theme-primary);	
}
	
.video .element {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
}

.video .element .item {
    margin: 2rem 0;
    flex: 1 0 0%;
    padding: 0 0.8rem;
	display: flex;
}

.item .mdc-card {
	margin: 0 auto;
	width: 90%;
}

.video-card__primary {
	padding: 1rem;
}

.video-card__media {
	background-color: var(--mdc-theme-background);
}

.video-card__media .overlay {
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.3)
}

.overlay .icon {
	font-size: 72px;
    color: white;	
}

.video-card__title {
	margin: 0;
}

.video-card__secondary {
    padding: 0 1rem 8px;
    color: var(--mdc-theme-text-secondary-on-background);
}

.video .separator {
    flex: 1 0 0%;
    padding: 0 0.8rem;
    flex-basis: 8.33333%;
    max-width: 8.33333%;
}

.git {
    background-color: var(--mdc-theme-primary);
    padding: 3rem 0;
}

.git .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
    width: 90%;
    padding: 2rem 0;
    text-align: center;
    color: #fff;
}

.git .container .graphic {
    max-width: 200px;
}

.git .container .git-btn {
    background-color: var(--mdc-theme-secondary);
}
	
.hero-footer {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    z-index: -1;
	padding: 1rem 0;
}

.hero-footer .logo {
    width: 92px;
}

.hero-footer .footer-title {
	display: flex;
    flex-direction: column;
    text-align: center;	
}

@media screen and (max-height: 568px) {
	.hero-header .payoff .graphic {
		width: 75%!important;
	}	
}

@media screen and (max-width: 40em) {
	.order2 {
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
	}
	.order-1 {
		-webkit-box-ordinal-group: 2;
		-ms-flex-order: 1;
		order: 1;
	}

	.item {
		-webkit-box-flex: 1!important;
		-ms-flex-positive: 1!important;
		flex-grow: 1!important;
		-ms-flex-preferred-size: 100%!important;
		flex-basis: 100%!important;
		max-width: 100%!important;
		padding: 0!important;
		margin-left: 0!important;
	}
	.separator {
		-webkit-box-flex: 1!important;
		-ms-flex-positive: 1!important;
		flex-grow: 1!important;
		-ms-flex-preferred-size: 100%!important;
		flex-basis: 100%!important;
		max-width: 100%!important;
		padding: 0!important;
		margin-left: 0!important;
	}

}