ul { list-style: none; } body, h1, h2, h3, h4, h5, h6, pre, code, td { font-size: 1em; } ul, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input, label, div, dd, dt, dl, table, tr, td, img, hr { margin: 0px; padding: 0px; } a img, :link img, :visited img, fieldset { border: none; } @font-face { font-family: 'SaviorSans-Bold'; src: url('/css/fonts/SaviorSans-Bold.otf'); } @font-face { font-family: 'SaviorSans-CondensedExtrabold'; src: url('/css/fonts/SaviorSans-CondensedExtrabold.otf'); } @font-face { font-family: 'SaviorSans-CondensedExtraLight'; src: url('/css/fonts/SaviorSans-CondensedExtraLight.otf'); } @font-face { font-family: 'SaviorSans-CondensedHeavy'; src: url('/css/fonts/SaviorSans-CondensedHeavy.otf'); } @font-face { font-family: 'SaviorSans-CondensedLight'; src: url('/css/fonts/SaviorSans-CondensedLight.otf'); } @font-face { font-family: 'SaviorSans-CondensedMedium'; src: url('/css/fonts/SaviorSans-CondensedMedium.otf'); } @font-face { font-family: 'SaviorSans-Condensed'; src: url('/css/fonts/SaviorSans-Condensed.otf'); } @font-face { font-family: 'SaviorSans-CondensedSemibold'; src: url('/css/fonts/SaviorSans-CondensedSemibold.otf'); } @font-face { font-family: 'SaviorSans-CondensedThin'; src: url('/css/fonts/SaviorSans-CondensedThin.otf'); } @font-face { font-family: 'SaviorSans-ExpandedBold'; src: url('/css/fonts/SaviorSans-ExpandedBold.otf'); } @font-face { font-family: 'SaviorSans-ExpandedExtrabold'; src: url('/css/fonts/SaviorSans-ExpandedExtrabold.otf'); } @font-face { font-family: 'SaviorSans-ExpandedExtraLight'; src: url('/css/fonts/SaviorSans-ExpandedExtraLight.otf'); } @font-face { font-family: 'SaviorSans-ExpandedHeavy'; src: url('/css/fonts/SaviorSans-ExpandedHeavy.otf'); } @font-face { font-family: 'SaviorSans-ExpandedLight'; src: url('/css/fonts/SaviorSans-ExpandedLight.otf'); } @font-face { font-family: 'SaviorSans-ExpandedMedium'; src: url('/css/fonts/SaviorSans-ExpandedMedium.otf'); } @font-face { font-family: 'SaviorSans-Expanded'; src: url('/css/fonts/SaviorSans-Expanded.otf'); } @font-face { font-family: 'SaviorSans-ExpandedSemibold'; src: url('/css/fonts/SaviorSans-ExpandedSemibold.otf'); } @font-face { font-family: 'SaviorSans-ExpandedThin'; src: url('/css/fonts/SaviorSans-ExpandedThin.otf'); } @font-face { font-family: 'SaviorSans-Extrabold'; src: url('/css/fonts/SaviorSans-Extrabold.otf'); } @font-face { font-family: 'SaviorSans-Heavy'; src: url('/css/fonts/SaviorSans-Heavy.otf'); } @font-face { font-family: 'SaviorSans-Light'; src: url('/css/fonts/SaviorSans-Light.otf'); } @font-face { font-family: 'SaviorSans-Regular'; src: url('/css/fonts/SaviorSans-Regular.otf'); } @font-face { font-family: 'SaviorSans-Semibold'; src: url('/css/fonts/SaviorSans-Semibold.otf'); } @font-face { font-family: 'SaviorSans-Thin'; src: url('/css/fonts/SaviorSans-Thin.otf'); } @font-face { font-family: 'SaviorSansVariable-Regular'; src: url('/css/fonts/SaviorSansVariable-Regular.otf'); } body { font-family: 'SaviorSans-Expanded'; background-color: #f0f0f0; color: #333; } .frame { box-sizing: border-box; margin: 0 auto; padding: 0 20px; position: relative; } @media screen and (min-width: 801px) { .frame { max-width: 1680px; } } @media screen and (max-width: 800px) { .frame { width: 100%; } } header { position: relative; } header .background-container { background: url('/images/background-header.png') no-repeat; background-position: center bottom; background-size: cover; padding-top: 42.6%; position: absolute; width: 100%; } header div.frame { background-size: cover; padding-top: 42.6%; position: relative; } header div.frame div.logo, header div.frame div.contact, header div.frame div.slogan, header div.frame div.ahb, header div.frame div.lady, header div.frame div.form, header div.frame nav { position: absolute; } header div.frame .logo { left: 7%; top: 6%; width: 29%; } @media screen and (max-width: 415px) { header div.frame .logo { left: 15%; width: 70%; } } header div.frame .logo img { width: 100%; } header div.frame .contact { color: #fff; font-size: 28px; left: 10%; top: 20%; } @media screen and (max-width: 1680px) { header div.frame .contact { font-size: 1.7vw; } } @media screen and (max-width: 1680px) { header div.frame .contact { font-size: 3vw; left: 25%; top: 38%; z-index: 1; } } header div.frame .contact strong { font-size: 34px; } @media screen and (max-width: 1680px) { header div.frame .contact strong { font-size: 2.0vw; } } @media screen and (max-width: 415px) { header div.frame .contact strong { font-size: 5.0vw; } } header div.frame .slogan { color: #fff; font-family: 'SaviorSans-CondensedSemibold'; font-size: 64px; font-style: italic; left: 3%; line-height: 100%; top: 60%; width: 20%; } header div.frame .slogan h1 { font-weight: normal; } @media screen and (max-width: 1680px) { header div.frame .slogan { font-size: 3.8vw; } } @media screen and (max-width: 415px) { header div.frame .slogan { font-size: 6.0vw; left: 13%; width: 100%; z-index: 1; } } header div.frame .ahb { color: #fff; font-family: 'SaviorSans-CondensedSemibold'; font-size: 32px; left: 3%; line-height: 100%; top: 87%; } @media screen and (max-width: 1680px) { header div.frame .ahb { font-size: 1.9vw; } } @media screen and (max-width: 415px) { header div.frame .ahb { font-size: 4vw; left: 33%; top: 80%; z-index: 1; } } header div.frame nav { font-family: 'SaviorSans-ExpandedBold'; font-size: 28px; left: 63.5%; top: 10%; white-space: nowrap; } @media screen and (max-width: 1680px) { header div.frame nav { font-size: 1.7vw; } } header div.frame nav li { display: inline-block; padding: 0 5%; } header div.frame nav a { color: #fff; text-decoration: none; } header div.frame nav a.button { border-radius: 5px; background: url('/images/background-button.png'); background-repeat: repeat-x; background-size: auto 100%; color: #3c2057; padding: 5px 10px; } header div.frame .lady { bottom: 0; height: 80%; text-align: center; width: calc(90%); } @media screen and (max-width: 800px) { header div.frame .lady { height: 60%; } } header div.frame .lady img { height: 100%; } header div.frame .form { background: #dedede; font-size: 22px; position: absollute; top: 10%; right: 5%; text-align: center; width: 20%; } @media screen and (max-width: 800px) { header div.frame .form { display: none; } } header div.frame .form h2 { color: #3c2057; font-family: 'SaviorSans-Semibold'; font-size: 28px; line-height: 100%; padding: 6% 0; text-align: center; } @media screen and (max-width: 1680px) { header div.frame .form h2 { font-size: 1.4vw; } } header div.frame .form input[type=text] { font-size: 18px; margin-bottom: 2%; padding: 5px; width: 80%; } @media screen and (max-width: 1680px) { header div.frame .form input[type=text] { font-size: 0.95vw; } } header div.frame .form input[type=button] { background: #3c71a3; border: 0; border-radius: 20px; color: #fff; font-family: 'SaviorSans-Semibold'; font-size: 36px; margin: 2% 0; padding: 0 8%; } @media screen and (max-width: 1680px) { header div.frame .form input[type=button] { font-size: 1.3vw; } } header div.frame .form div.narrow { color: #3c2057; display: inline-block; font-size: 14px; width: 80%; } @media screen and (max-width: 1680px) { header div.frame .form div.narrow { font-size: 0.8vw; } } section#content div.frame { background: url('/images/background-triangle-topleft.png') left 300px no-repeat, url('/images/background-triangle-topright.png') right 0px no-repeat; background-size: 20%, 20%; padding-bottom: 5%; position: relative; } @media screen and (max-width: 415px) { section#content div.frame { padding-bottom: 0; } } section#content div.frame h2 { color: #3c2057; font-family: 'SaviorSans-Semibold'; font-size: 68px; line-height: 100%; padding: 5% 10%; text-align: center; } @media screen and (max-width: 1680px) { section#content div.frame h2 { font-size: 4.0vw; } } @media screen and (max-width: 415px) { section#content div.frame h2 { font-size: 4.0vw; padding: 5% 5%; } } section#content div.frame div.left, section#content div.frame div.right { display: inline-block; vertical-align: top; } section#content div.frame div.left { margin-left: 15%; margin-right: 5%; width: 28%; } @media screen and (max-width: 415px) { section#content div.frame div.left { display: none; } } section#content div.frame div.right { width: 48%; } @media screen and (max-width: 415px) { section#content div.frame div.right { display: none; } } section#content div.frame h3 { border-left: 8px solid #3c2057; color: #3c71a3; font-family: 'SaviorSans-Bold'; font-size: 68px; line-height: 100%; padding: 0 5%; } @media screen and (max-width: 1680px) { section#content div.frame h3 { font-size: 4.0vw; } } section#content div.frame p { color: #3c2057; font-family: 'SaviorSans-Condensed'; font-size: 28px; padding-bottom: 20px; } @media screen and (max-width: 1680px) { section#content div.frame p { font-size: 1.6vw; } } @media screen and (max-width: 415px) { section#content div.frame p { font-size: 4.0vw; } } section#form { height: 1345px; } @media screen and (max-width: 415px) { section#form { height: 545px; } } section#form div.frame { background: url('/images/background-form.png') center; height: 1345px; position: relative; } @media screen and (max-width: 415px) { section#form div.frame { background: #dedede; height: 545px; } } section#form div.frame h2 { color: #3c2057; font-family: 'SaviorSans-Semibold'; font-size: 80px; line-height: 100%; padding: 3% 25%; text-align: center; } @media screen and (max-width: 1680px) { section#form div.frame h2 { font-size: 4.2vw; } } section#form div.frame form { margin: 0 auto; text-align: center; width: 60%; } @media screen and (max-width: 415px) { section#form div.frame form { width: 90%; } } section#form div.frame input[type=text] { font-size: 28px; margin-bottom: 2%; padding: 5px; width: 100%; } @media screen and (max-width: 1680px) { section#form div.frame input[type=text] { font-size: 1.6vw; } } @media screen and (max-width: 415px) { section#form div.frame input[type=text] { font-size: 4.0vw; } } section#form div.frame div.narrow { color: #3c2057; display: inline-block; font-size: 20px; width: 80%; } @media screen and (max-width: 1680px) { section#form div.frame div.narrow { font-size: 1.2vw; } } @media screen and (max-width: 415px) { section#form div.frame div.narrow { font-size: 3.0vw; } } section#form div.frame input[type=button] { background: #3c71a3; border: 0; border-radius: 20px; color: #fff; font-family: 'SaviorSans-Semibold'; font-size: 72px; margin: 2% 0; padding: 0 2%; } @media screen and (max-width: 1680px) { section#form div.frame input[type=button] { font-size: 3.8vw; } } section#form div.frame .logo { padding-top: 4%; } section#form div.frame .logo img { width: 30%; } footer { background: #3c2057; border-top: 2px solid #fff; } footer div.frame { background: url('/images/background-triangle-bottomright.png') right bottom no-repeat; background-size: 20%; height: 410px; position: relative; } footer div.frame div, footer div.frame nav { position: absolute; } footer div.frame .logo { left: 8%; top: 20%; width: 30%; } @media screen and (max-width: 415px) { footer div.frame .logo { left: 10%; top: 10%; width: 80%; } } footer div.frame .logo img { width: 100%; } footer div.frame .slogan { color: #fff; font-size: 30px; left: 8%; top: 45%; } @media screen and (max-width: 1680px) { footer div.frame .slogan { font-size: 2.1vw; } } @media screen and (max-width: 415px) { footer div.frame .slogan { font-size: 5.0vw; left: 10%; top: 27%; } } footer div.frame .contact { color: #fff; font-size: 34px; left: 50%; line-height: 100%; text-align: center; top: 25%; } @media screen and (max-width: 1680px) { footer div.frame .contact { font-size: 2.1vw; } } @media screen and (max-width: 415px) { footer div.frame .contact { font-size: 4.0vw; left: 30%; line-height: 6.0vw; top: 50%; } } footer div.frame .contact strong { font-size: 120%; } @media screen and (max-width: 1680px) { footer div.frame .contact strong { font-size: 2.5vw; } } @media screen and (max-width: 415px) { footer div.frame .contact strong { font-size: 5.0vw; } } footer div.frame .attribution { color: #fff; font-size: 26px; left: 8%; top: 85%; } @media screen and (max-width: 1680px) { footer div.frame .attribution { font-size: 1.6vw; } } @media screen and (max-width: 415px) { footer div.frame .attribution { font-size: 4.5vw; left: 15%; top: 38%; } } footer div.frame nav { font-family: 'SaviorSans-ExpandedBold'; font-size: 26px; left: 50%; top: 85%; white-space: nowrap; } @media screen and (max-width: 1680px) { footer div.frame nav { font-size: 1.6vw; } } footer div.frame nav li { display: inline-block; padding: 0 2%; } footer div.frame nav a { color: #fff; text-decoration: none; } #dialog { background: #fff; bottom: 10%; display: none; left: 10%; overflow-y: auto; padding: 20px; position: absolute; right: 10%; top: 10%; z-index: 10; } #dialog .close { cursor: default; font-size: 40px; font-weight: bold; position: absolute; right: 10px; top: 10px; } #dialog h2 { color: #3c2057; font-family: 'SaviorSans-Semibold'; font-size: 68px; line-height: 100%; padding: 5% 10%; text-align: center; } @media screen and (max-width: 1680px) { #dialog h2 { font-size: 4.0vw; } } #dialog p, #dialog li { color: #3c2057; font-family: 'SaviorSans-Condensed'; font-size: 28px; padding-bottom: 20px; } @media screen and (max-width: 1680px) { #dialog p, #dialog li { font-size: 1.6vw; } } #dialog ul { list-style-type: disc; margin-left: 30px; } #dialog-shadow { background: #000; bottom: 0; display: none; left: 0; opacity: 0.7; position: absolute; right: 0; top: 0; z-index: 9; }