/* --------------------------------------------------------
   Fonts
   -------------------------------------------------------- */

@font-face {
	font-family: '72';
	font-style: normal;
	font-weight: 400;
	src: url('../../resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Regular.woff2') format('woff2'), local('72');
}

@font-face {
	font-family: '72-Light';
	font-style: normal;
	src: url('../../resources/sap/ui/core/themes/sap_fiori_3/fonts/72-Light.woff2') format('woff2'), local('72-Light');
}

/* --------------------------------------------------------
   Page defaults
   -------------------------------------------------------- */

body {
	box-sizing: border-box;
	background: #f4f9fb;
	color: black;
	font-family: "72", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	color: #666;
	font-weight: normal;
	margin: 10px 0;
}

p {
	margin: 12px 0 16px 0;
}

a {
	text-decoration: none;
	color: #1366a2;
}

a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------
   Header
   -------------------------------------------------------- */

.header {
	background-color: #1366a2;
	height: 600px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.header .background {
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	width: 1920px;
	height: 1398px;
	transform: translate(-499px,-398px);
	opacity: .5;
}

.header .inner {
	margin: 20px;
	position: relative;
}

.header .content {
	margin-top: 166px;
	padding-top: 103px;
}

.header .content > .openui5 {
	margin: auto;
	width: 264px;
}

.header .headline {
	color: white;
	font-family: "72-Light", Arial, sans-serif;
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2em;
	text-align: center;
}

@media (max-width: 1440px) {
	.header {
		height: 480px;
	}
	.header .background {
		width: 1800px;
		height: 1311px;
		transform: translate(-700px,-415px);
	}
	.header .content {
		margin-top: 125px;
		padding-top: 82px;
	}
}

@media (max-width: 980px) {
	.header {
		height: 465px;
	}
	.header .background {
		width: 1700px;
		height: 1238px;
		transform: translate(-900px,-386px);
	}
}

@media (max-width: 767px) {
	.header {
		height: 300px;
	}
	.header .background {
		width: 1200px;
		height: 874px;
		transform: translate(-600px,-286px);
	}
	.header .content {
		margin-top: 65px;
		padding-top: 64px
	}
	.header .content > .openui5 {
		width: 198px;
	}
	.header .headline {
		font-size: 24px;
	}
}

/* --------------------------------------------------------
   Content Area
   -------------------------------------------------------- */

.main-content {
	max-width: 800px;
	text-align: center;
	margin: auto;
}

.main-content .margin-box {
	margin: 20px;
}

.main-content h2 {
	font-family: "72", Arial, sans-serif;
	font-size: 33px;
}

.codeblock .margin-box {
	margin: 20px;
}

.codeblock {
	background-color: white;
	border-radius: 4px;
	box-shadow: none;
	color: black;
	font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
	font-size: 14px;
	line-height: 1.2rem;
	overflow: auto;
	text-align: left;
	width: 100%;
	margin-bottom: 20px;
}

.codeblock .meta {
	color: #888;
}

.codeblock .tag {
	color: #1366a2;
}

.codeblock .name {
	color: #1366a2;
}

.codeblock .local {
	color: rgba(34, 34, 34, 0.6);
}

.codeblock .attr {
	color: #666;
}

.codeblock .kwd {
	color: rgb(9, 113, 241);
	font-weigt: bold;
	font-style: italic;
}

.codeblock .str {
	color: rgb(176, 90, 242);
}

.codeblock .highlight {
	color: rgb(255, 0, 0);
	font-style: italic;
	font-weight: bold;
	background-color: rgba(255, 255, 0, 0.25);
}

/* --------------------------------------------------------
   Footer
   -------------------------------------------------------- */

.footer {
	background-color: #1366a2;
}

.footer .margin-box {
	padding: 20px;
}

.footer .copyright {
	color: white;
}