html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { background: transparent; font-size: 100%; vertical-align: baseline; border: 0; outline: 0; margin: 0; padding: 0; }
html { background: #30302f; font: normal 14px/1.35 'Lato', sans-serif; color: #3c3c3b; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
body { background: #fff; width: 100%; border: 1px solid #3d3e3c; border-width: 0 1px; margin: 0 auto; }
article, aside, figure, figcaption, footer, header, nav, section { display: block; }
h1, h2, h3, h4, p, ul, ol, dl, pre, address, table, form, hr, figure, audio, video { margin-bottom: 1.5em; }
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/* TYPOGRAPHY
------------------------------------------------------------------------------------------------ */
h1, h2 { font-family: 'Lato', sans-serif; font-weight: normal; }
h3 { font-family: 'Lato', sans-serif; font-weight: bold; color: #242857; }
h1 { font-size: 40px; line-height: 1.125; text-align: center; }
h2 { font-size: 40px; line-height: 1.2; margin-bottom: 10px; }
h3 { font-size: 17px; line-height: 1.25; margin-bottom: 10px; }
a, :focus { outline: 0; }
a { color: #07f; text-decoration: none; }
a:visited { color: #07f; text-decoration: none; }
a:hover { color: #07f; text-decoration: none; }
a:active { color: #07f; text-decoration: none; }
a img { border: 0 none; }
strong, b { font-weight: bold; }
small { font-size: .875em; }
ul { list-style: square outside; margin-left: 2em; }
ul ul { margin-bottom: 0; }
/* MEDIA
------------------------------------------------------------------------------------------------ */
img { -ms-interpolation-mode: bicubic; }
img { display: block; vertical-align: middle; max-width: 100%; width: auto; width: auto\9; /* IE Fix */ height: auto; border: 0; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
figure { }
figcaption { }
img, object, embed { display: block; }
/* FLEXROWS
------------------------------------------------------------------------------------------------ */
.flexrow { font-size: 0; margin: 0; }
[class^="col"] { font-size: 14px; display: inline-block; width: 100%; vertical-align: top; padding: 0 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* MODUL: HEADER (Masthead)
------------------------------------------------------------------------------------------------ */
.masthead { position: relative; }
.logo { float: left; background: url(../images/logo.png); width: 137px; height: 55px; }
.logo-db { float: right; background: url(../images/logo-db.png); width: 56px; height: 39px; }
h1 { clear: both; }
/* MODUL: MAIN
------------------------------------------------------------------------------------------------ */
section { padding: 0; position: relative; }
.col1_2 { width: 33%; margin-left: 50%; }
.col1_4 { width: 33%; }
h2 + p { font-size: 20px; line-height: 1.2; color: #999; margin-bottom: 40px; }
/* Intro */
.intro { padding: 40px 40px 30px; }
.intro .col1_2 { font-size: 14px; margin-left: 0%; }
.intro p { color: #242857; margin-bottom: 10px; }
.jumper { background: url(../images/a-jumper.png); position: absolute; bottom: 0; left: 50%; display: block; width: 58px; height: 58px; margin: 0 0 -29px -29px; z-index: 1; }
/* Video */
.video { background: #3c3c3b; color: #fff; position: relative; padding: 60px 40px 30px; }
video { display: block; margin: 3px auto 30px; }
.campaigndetails { font-family: 'AvenirNextRoundedW01-De 1075568'; font-size: 14px; line-height: 1.25; list-style: none; overflow: hidden; margin: 0 0 15px 85px; }
.campaigndetails li { margin-bottom: 8px; float: left; margin-left: 60px; }
.campaigndetails li:first-child { margin-left: 0; }
.campaigndetails span { font-size: 12px; color: #777; }
.video p:first-child { font-size: 20px; color: #999; position: absolute; top: 180px; right: 40px; }
p.buttons { clear: left; text-align: center; margin: 0; }
p.buttons a { background: url(../images/buttons.png); text-indent: -9999px; display: inline-block; width: 168px; height: 48px; overflow: hidden; margin: 0 10px; }
p.buttons a.btn.android { background-position: 0 -48px }
p.buttons a.btn.ios { background-position: 0 -96px }
/* Bottom */
.bottom { }
.bottom .jumper { background: url(../images/a-jumper-bottom.png) no-repeat 50% 0; font-family: 'Lato'; font-size: 10px; color: #999; text-align: center; width: 80px; bottom: -155px; padding-top: 65px; margin-left: -40px; }
.bottom h2 { margin-left: 20px; }
/* MODUL: FOOTER (Contentinfo)
------------------------------------------------------------------------------------------------ */
footer[role=contentinfo] { background: url(../images/bg-footer.jpg) no-repeat 50% 100%; height: 280px; }
/*
===================================================================================================
M E D I A Q U E R I E S > Print Styles
===================================================================================================
*/
@media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; box-shadow: none !important; opacity: 1 !important; filter: none !important; -ms-filter: none !important; }
@page { margin: 2cm; }
h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
p, h1, h2, h3, h4, h5, h6 { orphans: 3; widows: 3; }
ul { list-style: disc inside; padding: 0 1em; }
ol { list-style: decimal inside; padding: 0 1em; }
a, a:visited { color: black !important; text-decoration: underline; }
img { page-break-inside: avoid; }
}