Style the marketplace

Signed-off-by: Panu Horsmalahti <phorsmalahti@mirantis.com>
This commit is contained in:
Panu Horsmalahti committed 2020-12-10 11:12:27 +02:00
1 parent 57a6431b4c
commit ca2312b30a
2 files changed
+873 -2

No files matched your search

+10 -2
View File
@@ -1,10 +1,18 @@
<html>
<head><title>Test Marketplace</title></head>
<head>
<title>Test Marketplace</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h3>Lens Marketplace</h3>
<p>
<ul>
<li>Mirantis Container Cloud Lens Extension - <a href="lens://internal/install-extension?name=@mirantis/lens-extension-cc">Install!</a><br/><a href="lens://extension/@mirantis/lens-extension-cc">Extension Link</a></li>
<li>Mirantis Container Cloud Lens Extension
<ul>
<li><a href="lens://internal/install-extension?name=@mirantis/lens-extension-cc">Install</a></li>
<li><a href="lens://extension/@mirantis/lens-extension-cc">Open</a></li>
</ul>
</li>
</ul>
</p>
</body>
+863
View File
@@ -0,0 +1,863 @@
/* css Zen Garden submission 215 - 'A Robot Named Jimmy', by meltmedia, http://meltmedia.com */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */
/* All associated graphics copyright 2013, meltmedia */
/* IMPORTANT */
/* This design is not a template. You may not reproduce it elsewhere without the
designer's written permission. However, feel free to study the CSS and use
techniques you learn from it elsewhere. */
/*
* A submission from meltmedia for the CSS Zen Garden's 10th Anniversary
*
* Design by @guitrasher
* Development by @jimmyking
*
* http://meltmedia.com
*
*
* +N@@@@@@?~ +@@@@@@N+~
* @@@@@@@@@@@D~ $@@@@@@@@@@@Z
* ~$@@@@@@@@@@@@@@ ~N@@@@@@@@@@@@@@~
* 7@@@@@@@@@@@@@@@N 8@@@@@@@@@@@@@@@D
* ~@@@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@@~
* @@@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@@@@~
* 8@@@@@@@@@@@@@@@@ ~@@@@@@@@@@@@@@@@@
* ?@@@@@@@@@@@@@@@7 $@@@@@@@@@@@@@@@I
* @@@@@@@@@@@@@@D @@@@@@@@@@@@@@8
* @@@@@@@@@@@@@+ ~@@@@@@@@@@@@@
* @@@@@@@@@@@7 @@@@@@@@@@@I
* ~$@@@@@@@@@@@ $@@@@@@@@@@@~ ~@@@@@@ ~
* @@@@@@@@@@@@@ @@@@@@@@@@@@@~ +@@@@@@@@@@I
* 7@@@@@@@@@@@@@@ O@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@
* +@@@@@@@@@@@@@@@~ O@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@
* ~@@@@@@@@@@@@@@@@8 @@@@@@@@@@@@@@@@8~ @@@@@@@@@@@@@@@@N
* ~@@@@@@@@@@@@@@@@@~ @@@@@@@@@@@@@@@@@ $@@@@@@@@@@@@@@@@@
* ~@@@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@@@@~ ?@@@@@@@@@@@@@@@@@
* ~8@@@@@@@@@@@@@@@? N@@@@@@@@@@@@@@@+ ~@@@@@@@@@@@@@@@@+
* ~@@@@@@@@@@@@@@@~ ~@@@@@@@@@@@@@@N @@@@@@@@@@@@@@8
* ~N@@@@@@@@@@@? ~D@@@@@@@@@@@+ @@@@@@@@@@@@+~
* ~ $@@@@@@@I $@@@@@@D ~Z@@@@@@N~
*
* _ _ _ _
* | | | | (_)
* _ __ ___ ___| | |_ _ __ ___ ___ __| |_ __ _
* | '_ ` _ \ / _ \ | __| '_ ` _ \ / _ \/ _` | |/ _` |
* | | | | | | __/ | |_| | | | | | __/ (_| | | (_| |
* |_| |_| |_|\___|_|\__|_| |_| |_|\___|\__,_|_|\__,_|
*
*
* See the original LESS files at https://github.com/jking90/zen-garden
*
*/
@import url('http://fonts.googleapis.com/css?family=Arvo:700|Open+Sans:400italic,400');
@import url('http://fast.fonts.com/cssapi/95b765fd-fae4-4f1b-8155-d8244914a5c6.css');
aside,
footer,
header,
nav,
section {
display: block;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
margin-left: 40px;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
body {
color: #0f2a36;
font-family: 'Open Sans', Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.25em;
}
h1 {
font-family: 'Adelle W01 Bold', 'Arvo', Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 91px;
font-weight: 500;
}
h2 {
color: #dd3b2a;
font-size: 22px;
font-style: italic;
font-weight: 400;
}
h3 {
color: #dd3b2a;
font-family: 'Adelle W01 Bold', 'Arvo', Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
font-size: 40px;
font-weight: 500;
line-height: 1.25em;
margin: 0.5em 0;
}
h3 + p {
margin-top: 0;
}
a {
color: #2babe1;
text-decoration: none;
}
abbr[title] {
border: none;
}
.preamble abbr,
.supporting div abbr,
.requirements abbr {
border-bottom: 1px dotted #30e0ad;
}
.preamble abbr:hover:after,
.supporting div abbr:hover:after,
.requirements abbr:hover:after {
content: ' (' attr(title) ')';
text-shadow: 0 0 1em #dd3b2a;
}
.spin from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.spin to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.rise from {
top: 100%;
}
.rise to {
top: 165px;
}
.rise-short from {
top: 100%;
}
.rise-short to {
top: 275px;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
from {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes rise {
from {
top: 100%;
}
to {
top: 165px;
}
}
@-moz-keyframes rise {
from {
top: 100%;
}
to {
top: 165px;
}
}
@-ms-keyframes rise {
from {
top: 100%;
}
to {
top: 165px;
}
}
@-o-keyframes rise {
from {
top: 100%;
}
to {
top: 165px;
}
}
@keyframes rise {
from {
top: 100%;
}
to {
top: 165px;
}
}
@-webkit-keyframes rise-short {
from {
top: 100%;
}
to {
top: 275px;
}
}
@-moz-keyframes rise-short {
from {
top: 100%;
}
to {
top: 275px;
}
}
@-ms-keyframes rise-short {
from {
top: 100%;
}
to {
top: 275px;
}
}
@-o-keyframes rise-short {
from {
top: 100%;
}
to {
top: 275px;
}
}
@keyframes rise-short {
from {
top: 100%;
}
to {
top: 275px;
}
}
aside:before {
-webkit-animation: spin 8s infinite linear;
-moz-animation: spin 8s infinite linear;
-ms-animation: spin 8s infinite linear;
-o-animation: spin 8s infinite linear;
}
aside:after {
-webkit-animation: rise 1.5s 1 ease;
-moz-animation: rise 1.5s 1 ease;
-ms-animation: rise 1.5s 1 ease;
-o-animation: rise 1.5s 1 ease;
}
header {
margin: 0 auto;
max-width: 1040px;
position: relative;
text-align: center;
top: 0;
width: 100%;
z-index: 1;
}
header h1 {
border-top: 4px solid white;
color: #00374f;
display: inline-block;
min-height: 70px;
margin: 55px auto 0;
padding: 0 10px;
z-index: 2;
}
header h1:after {
background-color: #dd3b2a;
content: '';
height: 2px;
left: 0;
margin-top: -3px;
position: absolute;
width: 100%;
z-index: -1;
}
header h2 {
text-align: right;
max-width: 695px;
margin: -10px auto 0;
width: 100%;
}
.summary {
position: relative;
max-width: 1040px;
margin: 80px auto 0;
width: 100%;
z-index: 2;
}
.summary p {
clear: right;
color: #dd3b2a;
float: right;
font-style: italic;
margin: 0;
width: 300px;
}
.summary p a:last-child {
white-space: nowrap;
}
.preamble {
clear: left;
float: left;
left: 50%;
margin-left: -520px;
max-width: 495px;
position: relative;
top: 298px;
width: 50%;
z-index: 4;
}
.intro {
background: #edf6ff;
background: -moz-linear-gradient(top, #ffffff 0%, #edf6ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #edf6ff));
background: -webkit-linear-gradient(top, #ffffff 0%, #edf6ff 100%);
background: -o-linear-gradient(top, #ffffff 0%, #edf6ff 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #edf6ff 100%);
background: linear-gradient(to bottom, #ffffff 0%, #edf6ff 100%);
float: left;
height: 590px;
width: 100%;
}
.supporting {
background-color: rgba(255, 255, 255, 0.9);
border-top: 5px solid #dd3b2a;
border-bottom: 5px solid #2babe1;
float: left;
position: relative;
width: 100%;
z-index: 3;
}
.supporting > * {
float: left;
width: 50%;
}
.explanation {
float: left;
margin-left: 1.5%;
max-width: 495px;
padding-bottom: 15px;
position: relative;
left: 50%;
}
.participation {
background: #edf6ff;
border-top: 5px solid #cce4fb;
padding-top: 15px;
width: 100%;
}
.participation h3,
.participation p {
clear: left;
float: left;
left: 50%;
margin-left: -520px;
max-width: 495px;
position: relative;
}
.participation:after {
background: url(../images/participation.png) 40px center no-repeat;
background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDExLjg0N3B4IiBoZWlnaHQ9IjQxMS44NDdweCIgdmlld0JveD0iMCAwIDQxMS44NDcgNDExLjg0NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNDExLjg0NyA0MTEuODQ3Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDQ0UzRkMiIGQ9Ik0yMDUuOTIzLDQxMS44NDdDOTIuMzc4LDQxMS44NDcsMCwzMTkuNDY4LDAsMjA1LjkyM0MwLDkyLjM3OSw5Mi4zNzgsMCwyMDUuOTIzLDANCgljMTEzLjU0NiwwLDIwNS45MjQsOTIuMzc5LDIwNS45MjQsMjA1LjkyM0M0MTEuODQ3LDMxOS40NjgsMzE5LjQ2OSw0MTEuODQ3LDIwNS45MjMsNDExLjg0N3oiLz4NCjxnPg0KCTxkZWZzPg0KCQk8Y2lyY2xlIGlkPSJTVkdJRF8xXyIgY3g9IjIwNS45MjMiIGN5PSIyMDUuOTIzIiByPSIxOTcuOTU3Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8Y2lyY2xlIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkZGRkYiIGN4PSIyMDUuOTIzIiBjeT0iMjA1LjkyMyIgcj0iMTk3Ljk1NyIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNFRTgxMTIiIGQ9Ik0zNTcuMzg2LDM1NC42MWMtMTAuNzA5LTI0LjczNC0xOC41MDktNDEuODYtMjEuNDg0LTUwLjIwMWwyMi42OTItNTIuMDc4DQoJCWwtMjUuNDAyLTIuNjQ1bC0xMi45NDgsMzMuMTU0YzAuMDA4LDAuMDA0LDAuMDM0LDAuMDIyLDAuMDM0LDAuMDIyYy0wLjAxNi0wLjAxMy0wLjAzLDAtMC4wNDgsMGwtMC4wNzksMC4yMDdsLTAuMDY5LTAuMjINCgkJYy0zMC4xOTktMi4yODgtNDMuOTQ4LDIyLjI2OS00My45NDgsMjIuMjY5YzE3LjEyMi0zNi4xMDYsNDEuMzA4LTIzLjg1MSw0My45MDctMjIuNDAxbC0zLjI3NC05Ljg5N2wtOS42MzUtNDMuMTQ2bC0yMi41MTgsMS45NDENCgkJbDIuMzQ4LDM4Ljg1OWwtMjAuMjU1LTQxLjExN2wtMjEuMTY4LDYuMTc2bDE3LjgwNiw0Ny43NGwtMzAuMDkyLTMxLjI2NmwtMTIuNTExLDEyLjA5OGwyNi4zOTIsMzMuMjQ5bC0zMS4wNTItMTQuMDY1DQoJCWwtOS45NjEsMTMuNDM4bDMwLjY0NCwyMS4wMjZsMjguNCwzOS40ODlsMjYuNDUxLTYuOTY1bDQuODkzLTExLjA0OWwxNC43ODEtMi4wNTRsMTMuOTYzLTE5LjE0MWwtOS40MDgsMjIuNzk0bC0xNC4yNzEsMy4zODMNCgkJbC01LjQwNCw5LjcyOWwtMzAuOTMxLDMuNDA0bDI3LjE3OSw0My4zMUwzNTcuMzg2LDM1NC42MXoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjMkJBQkUyIiBkPSJNMTExLjAyNiwzOTcuODFsMjcuMTc4LTQzLjMxbC0zMC45MzMtMy40MDdsLTUuNDAyLTkuNzI3bC0xNC4yNzMtMy4zODMNCgkJbC05LjQwNy0yMi43OTZsMTMuOTYzLDE5LjE0MmwxNC43ODQsMi4wNTNsNC44OSwxMS4wNWwyNi40NTQsNi45NjRsMjguMzk4LTM5LjQ4N2wzMC42NDUtMjEuMDI3bC05Ljk2Mi0xMy40MzhsLTMxLjA1MSwxNC4wNjcNCgkJbDI2LjM5MS0zMy4yNTJsLTEyLjUxMi0xMi4wOThsLTMwLjA5MiwzMS4yNjdsMTcuODA3LTQ3Ljc0bC0yMS4xNjctNi4xNzNsLTIwLjI1NSw0MS4xMTRsMi4zNDgtMzguODZsLTIyLjUyMS0xLjk0bC05LjYzMyw0My4xNDYNCgkJbC0zLjI3MSw5Ljg5NmMyLjU5OC0xLjQ0NywyNi43ODYtMTMuNzA2LDQzLjkwNCwyMi40MDNjMCwwLTEzLjc0Ny0yNC41Ni00My45NDUtMjIuMjY4bC0wLjA3MiwwLjIxOGwtMC4wNzYtMC4yMDgNCgkJYy0wLjAxOSwwLTAuMDM1LTAuMDEtMC4wNDgsMGMwLDAsMC4wMjUtMC4wMTgsMC4wMzItMC4wMjFsLTEyLjk0OS0zMy4xNTZsLTI1LjQwMiwyLjY0NmwyMi42OTUsNTIuMDc3DQoJCWMtMi45NzcsOC4zNDMtMTAuNzc3LDI1LjQ2Ni0yMS40ODYsNTAuMjAyTDExMS4wMjYsMzk3LjgxeiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGMDU4MTkiIGQ9Ik0yOTIuNDE3LDE2Ljg1NGwtMjcuMTc5LDQzLjMwOGwzMC45MzEsMy40MDdsNS40MDQsOS43MjlsMTQuMjcxLDMuMzgzDQoJCWw5LjQwOCwyMi43OTVsLTEzLjk2My0xOS4xNDFsLTE0Ljc4MS0yLjA1NGwtNC44OTMtMTEuMDUxbC0yNi40NTEtNi45NjRsLTI4LjQsMzkuNDg5bC0zMC42NDQsMjEuMDI3bDkuOTYxLDEzLjQzOGwzMS4wNTItMTQuMDY3DQoJCWwtMjYuMzkyLDMzLjI1MmwxMi41MTEsMTIuMDk3bDMwLjA5Mi0zMS4yNjhsLTE3LjgwNiw0Ny43NDJsMjEuMTY4LDYuMTc2bDIwLjI1NS00MS4xMThsLTIuMzQ4LDM4Ljg1OGwyMi41MTgsMS45NDNsOS42MzUtNDMuMTQ2DQoJCWwzLjI3NC05Ljg5OWMtMi42LDEuNDQ5LTI2Ljc4NSwxMy43MDgtNDMuOTA3LTIyLjQwMWMwLDAsMTMuNzQ5LDI0LjU1OSw0My45NDgsMjIuMjY5bDAuMDY5LTAuMjE4bDAuMDc5LDAuMjA4DQoJCWMwLjAxOCwwLDAuMDMyLDAuMDEsMC4wNDgsMGMwLDAtMC4wMjYsMC4wMTgtMC4wMzQsMC4wMjFsMTIuOTQ4LDMzLjE1NWwyNS40MDItMi42NDZsLTIyLjY5Mi01Mi4wNzcNCgkJYzIuOTc2LTguMzQzLDEwLjc3NS0yNS40NjYsMjEuNDg0LTUwLjIwMkwyOTIuNDE3LDE2Ljg1NHoiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkFENDAwIiBkPSJNNDYuMDU2LDY1Ljc0NGMxMC43MDksMjQuNzM2LDE4LjUxLDQxLjg2LDIxLjQ4Niw1MC4yMDNsLTIyLjY5NSw1Mi4wNzcNCgkJbDI1LjQwMiwyLjY0NWwxMi45NDktMzMuMTU1Yy0wLjAwNy0wLjAwMi0wLjAzMi0wLjAyMi0wLjAzMi0wLjAyMmMwLjAxMywwLjAxMiwwLjAyOSwwLDAuMDQ4LDBsMC4wNzYtMC4yMDhsMC4wNzIsMC4yMg0KCQljMzAuMTk4LDIuMjkxLDQzLjk0NS0yMi4yNjcsNDMuOTQ1LTIyLjI2N2MtMTcuMTE4LDM2LjEwNy00MS4zMDcsMjMuODUtNDMuOTA0LDIyLjM5OWwzLjI3MSw5Ljg5OGw5LjYzMyw0My4xNDdsMjIuNTIxLTEuOTQxDQoJCWwtMi4zNDgtMzguODU3bDIwLjI1NSw0MS4xMTNsMjEuMTY3LTYuMTczbC0xNy44MDctNDcuNzQybDMwLjA5MiwzMS4yNjZsMTIuNTEyLTEyLjA5NWwtMjYuMzkxLTMzLjI1M2wzMS4wNTEsMTQuMDY3bDkuOTYyLTEzLjQzNw0KCQlsLTMwLjY0NS0yMS4wMjdsLTI4LjM5OC0zOS40ODhsLTI2LjQ1NCw2Ljk2MmwtNC44OSwxMS4wNTJsLTE0Ljc4NCwyLjA1MUw3OC4xODgsMTAyLjMybDkuNDA3LTIyLjc5M2wxNC4yNzMtMy4zODRsNS40MDItOS43MjcNCgkJbDMwLjkzMy0zLjQwN0wxMTEuMDI2LDE5LjdMNDYuMDU2LDY1Ljc0NHoiLz4NCgk8ZyBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIj4NCgkJPHBvbHlnb24gZmlsbD0iI0YwNUExQyIgcG9pbnRzPSIyNLine truncated
clear: right;
content: '';
display: block;
float: left;
height: 412px;
left: 50%;
margin-top: -310px;
max-width: 495px;
min-width: 412px;
position: relative;
width: 100%;
}
.benefits {
background-color: #edf6ff;
border-bottom: 5px solid #cce4fb;
margin-bottom: 25px;
padding: 150px 0 50px 0;
width: 100%;
}
.benefits h3,
.benefits p {
clear: left;
float: left;
left: 50%;
margin-left: 1.5%;
max-width: 495px;
position: relative;
width: 50%;
}
.benefits:before {
border: 1px solid #dd3b2a;
content: '';
display: block;
height: 0px;
left: 50%;
position: absolute;
margin: -60px 0 0 -110px;
width: 220px;
}
.benefits:after {
background: url(../images/benefits.png) 150px center no-repeat;
background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMzEyLjA5N3B4IiBoZWlnaHQ9IjMxMi4wOTdweCIgdmlld0JveD0iMCAwIDMxMi4wOTcgMzEyLjA5NyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMzEyLjA5NyAzMTIuMDk3Ig0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNDQ0UzRkMiIGQ9Ik0xNTYuMDQ4LDMxMi4wOTdDNzAuMDAzLDMxMi4wOTcsMCwyNDIuMDk0LDAsMTU2LjA0OEMwLDcwLjAwMyw3MC4wMDMsMCwxNTYuMDQ4LDANCglzMTU2LjA0OSw3MC4wMDMsMTU2LjA0OSwxNTYuMDQ4QzMxMi4wOTcsMjQyLjA5NCwyNDIuMDkzLDMxMi4wOTcsMTU2LjA0OCwzMTIuMDk3eiIvPg0KPGc+DQoJPGRlZnM+DQoJCTxjaXJjbGUgaWQ9IlNWR0lEXzFfIiBjeD0iMTU2LjA0OCIgY3k9IjE1Ni4wNDgiIHI9IjE0NS45NzYiLz4NCgk8L2RlZnM+DQoJPGNsaXBQYXRoIGlkPSJTVkdJRF8yXyI+DQoJCTx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgb3ZlcmZsb3c9InZpc2libGUiLz4NCgk8L2NsaXBQYXRoPg0KCTxnIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiPg0KCQk8Y2lyY2xlIGZpbGw9IiMyREUwQUQiIGN4PSIxNTYuMDQ4IiBjeT0iMTU2LjA0OCIgcj0iMTQ1Ljk3NiIvPg0KCTwvZz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjQ0NFM0ZDIiBkPSJNMjM5Ljc5OCwyMjIuMTc1YzEuNzY2LTcuOTAzLDEuNzk1LTM3LjIzMS0xOC45MTYtNzcuNDQ1DQoJCWMtMS44MjMtMy41NS0zLjQ0NS03LjY0Ni01LjE2Mi0xMS45NzVjLTIuMjcxLTUuNzI1LTQuODI4LTEyLjE2OS04LjQwMi0xOC42OTdjLTIuMzA1LTcuODI5LTEzLjI0LTQxLjY0NC0zMy41OTYtNTQuMDk3DQoJCWMtMTMuMTAyLTguMDE1LTIwLjQ0Ny0xMS45MjUtMzUuNzQ0LTE5LjA0MWMtMS4zOC0wLjYzNy0yLjctMS4zMDItMy45NTEtMS45MTljLTQuNDIyLTIuMjAyLTguMjQ4LTQuMTA3LTEyLjQ0LTQuMzY5bC0wLjg4Mi0wLjAyNw0KCQljLTExLjUzLTAuMDUyLTE3LjU2OCwxMC4xNTItMTkuNTQ3LDEzLjQ5MWMtMC40MjIsMC42ODYtMi4xNjUsMy4wMTctMy40MzgsNC43MjVjLTQuODAyLDYuNDE5LTcuODA4LDEwLjU2Mi05LjEyMSwxMy45MzkNCgkJYy0xLjUxOCwzLjkxLTAuOTgxLDcuNDMxLDIuNzM1LDEzLjkyYy0xLjI3OSwxLjk1NC0yLjQ3Niw0LjE2OC0zLjE5Miw2LjQ3N2MtMC41NjcsMS44NTMtMS4xMTUsNS41NjMsMS40ODcsOS43MzcNCgkJYzEuOTEsMy4wNjUsOS44ODIsMTEuMDgxLDE2LjAyMSwxMi4wNmwwLjc3MywwLjEwOGwwLjQ5MSwwLjAzYzIuNzI4LDAuMTY5LDUuNDA4LTAuNDM3LDguNTAyLTEuMTMxDQoJCWMyLjA1NS0wLjQ3LDUuMTU3LTEuMTY0LDYuNjIxLTEuMDczYzAuMDA4LDAuMDAyLDAuMDA4LDAuMDAyLDAuMDA4LDAuMDAyYzEuMTQxLDAuMTA0LDIuMjM2LDAuNTQ5LDQuMDc1LDEuMzE5DQoJCWMyLjQ5NCwxLjA0Nyw1LjU4NiwyLjM0Niw5LjU3NSwyLjU5NGMxLjM1OCwwLjA4NSwyLjczLDAuMDQxLDQuMDk0LTAuMTQ1YzAuNTE0LTAuMDY1LDEuNzQ2LTAuMTUzLDQuMjczLDAuMDAzDQoJCWMxLjc1NCwwLjEwOSwzLjUxOCwwLjI5Miw1LjA1NywwLjQ0NWMwLjA0OSwwLjAxLDAuMTA1LDAuMDEzLDAuMTU0LDAuMDE2YzIuNTU5LDYuMDUxLDYuNDc4LDE4LjE0Myw3LjM0NiwyOC45Nw0KCQljLTEuNjIzLDQuMzI2LTQuNjI2LDEzLjQ4LTQuODIzLDIyLjU2N2MtMC4wNzIsMy4xODMtMC4yNTYsNi44MDctMC41MTksMTAuMzU5Yy02LjMtNi4zNzMtMTYuMDI3LTEyLjM5MS0zMC42NTMtMTMuNDM4DQoJCWwtMC43MTgtMC4wNTRjLTEzLjg2Ni0wLjg2MS0yMi4yMjUsMi42MjMtMjcuMjM3LDUuODc4Yy0wLjE2OS0wLjE2NC0wLjMzMy0wLjMyMy0wLjQ5MS0wLjQ4MQ0KCQljLTcuMjI5LTcuMDgzLTE4LjE1NC0xNy43OTUtMzMuMzEyLTIwLjI3NmMtMi40NDUtMC40MDctNC44NzgtMC42ODEtNy4yMjYtMC44MjhjLTE4LjQ0OC0xLjE0NS0yOS45MTQsNS44MTItMzYuNzY2LDkuOTY0DQoJCWMtMC43MjMsMC40NC0xLjU5NCwwLjk2Ny0yLjM0MiwxLjM5NmMtMC43MjktMC4zODMtMS40NTMtMC43NjMtMS44ODgtMS4wMTFsLTQuOTQxLTMuMzg0bC01LjI2MSw4NC42ODdsNzIuODY1LDQ4LjMzNmwwLjg3Mi0zLjIxMw0KCQljMC43MS0yLjYwNCwyLjI0My04LjI1OSwzLjYzNy0xMi4yMDhjMy45NjgsMS4yNjMsOS41NjcsMy42NzksMTQuMzM0LDUuNzI4YzMuNzMyLDEuNjA0LDcuNjI5LDMuMjgyLDExLjU1Myw0LjgyOQ0KCQljNS44NDcsMi4zMDYsMTUuMTcsNC4wMDMsMjUuNTgxLDQuNjUxYzkuMDM0LDAuNTYxLDIyLjg3LDAuNTk4LDM3LjQ0MS0yLjM4NmMxMC41NjQtMi4xNTYsMTguMjk1LTIuMTg0LDI1LjEyMS0yLjIwMg0KCQljMTAuNjQ2LTAuMDM5LDIwLjczLTAuMDY2LDMxLjYxNy05LjM5YzMuOTcxLTEuODYxLDguNTYxLTQuMTE5LDEwLjUyMS01LjQ4MWM4LjA3NC01LjYxMSwxNC4wMzgtMTcuMzc4LDguMDM3LTI5Ljk1NA0KCQlDMjM5LjQ1NCwyMjguNzk2LDIzOS42NCwyMjMuMTUsMjM5Ljc5OCwyMjIuMTc1eiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiMwRTgzQzQiIGQ9Ik0yMjkuNTcyLDIxOS45YzAuOTU0LTQuMjg3LDIuMTkxLTMxLjE1NS0xOC4wMDQtNzAuMzc4DQoJCWMtNC43NDktOS4yMzQtNy43MzUtMjAuMzM3LTEzLjk5MS0zMS40MjljMCwwLTEwLjQ0Ny0zNy42NDgtMjkuMzI2LTQ5LjE5N2MtMTIuNzc5LTcuODEyLTE5LjktMTEuNTk0LTM0LjY3MS0xOC40NjUNCgkJYy01LjQ2Mi0yLjUyMi0xMC4wNjYtNS4zNDMtMTIuOTIzLTUuMzQ4Yy01LjA1MS0wLjAyNy04LjI0Nyw0LjU3Mi0xMC40OTEsOC4zNjFjLTEuNzA0LDIuODktMTAuMzkzLDEzLjQ3OS0xMS44MDIsMTcuMTA3DQoJCWMtMC41MzMsMS4zNyw1LjgyOCwxMC45MDEsNS44MjgsMTAuOTAxcy00Ljc2Myw0LjcwNS02LjAzLDguNzYxYy0wLjQ5NCwxLjY0Miw3LjMyOCw4LjEwNyw5LjEsOC4zOTMNCgkJYzIuNzIyLDAuNDIsMTAuNDc1LTIuNjY1LDE1Ljc3Mi0yLjE1NGM2LjI2NCwwLjYwMiw5LjcwMiw0LjU2MywxNS4zOCwzLjgxNWM1LjY4My0wLjc0MywxNS4yMjgsMS4xMzcsMTYuODg5LDAuNjg4DQoJCWMxLjY1OS0wLjQ1MywxMS4xMjIsMjIuMDQxLDExLjkyMyw0MC44MjRjMCwwLTQuNzMyLDExLjAxOC00Ljk1MiwyMS4xMDJjLTAuMTkxLDguNzQ4LTEuNjgzLDI5LjYxMS0zLjk0OSwzMS41OTUNCgkJYy0yLjI2MywxLjk3Ny00LjIzMiwwLjk3NC02LjY4Ny0xLjkyN2MwLDAtNi4zMS0yMC42OTEtMzEuNzYyLTIyLjUxN2MtMjEuODkyLTEuNTc0LTI1LjA2Niw5LjE1NS0yNy42NDcsOC40Mg0KCQljLTUuMTUtMS40Ni0xNy4yNjgtMjAuNTQ3LTM1LjA2NS0yMy40NzJjLTMwLjEzNi00Ljk0LLine truncated
content: '';
display: block;
float: left;
height: 312px;
left: 50%;
margin: -90px 0 0 -1050px;
max-width: 495px;
min-width: 312px;
position: relative;
width: 100%;
}
.requirements {
left: 50%;
margin-left: -520px;
max-width: 1040px;
min-height: 350px;
position: relative;
width: 100%;
}
.requirements h3 {
text-align: center;
}
.requirements p {
float: left;
margin-top: 0;
max-width: 495px;
width: 47.5%;
}
.requirements p:nth-child(-n+3) {
clear: left;
margin-right: 5%;
}
.requirements p:nth-child(4) {
position: absolute;
right: 0;
}
.requirements p:last-child {
font-size: 24px;
line-height: 1.25em;
margin-top: 40px;
max-width: none;
padding: 0 22.5% 20px;
text-align: center;
width: 55%;
}
aside {
background: #2babe1;
border-top: 5px solid #edf6ff;
clear: both;
display: block;
float: left;
margin-bottom: -5px;
width: 100%;
}
aside:before {
background: url('../images/starburst.png') center top no-repeat;
background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOTIyLjU3NHB4IiBoZWlnaHQ9IjkyMS4wNzJweCIgdmlld0JveD0iMCAwIDkyMi41NzQgOTIxLjA3MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOTIyLjU3NCA5MjEuMDcyIg0KCSB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNzQ1Ljk0NSw4MjkuMDQyIDUxNS4wNzIsNTc3LjIyMiA1NzIuNjM1LDkxMy45NzIgNDY0LjE0Niw1OTAuMDIgMzc5Ljc2Myw5MjEuMDcyIDQxMi40MjEsNTgwLjk5OSANCgkyMDAuNjgyLDg0OS4xMDggMzY4LjgzNSw1NTEuNzIxIDY2LjM1Miw3MTAuNTI2IDM0MC45MjgsNTA3LjIzOSAwLDUyOS4yOTEgMzMzLjUyLDQ1NS4yNTYgMTMuMTAxLDMzNi43MzEgMzQ3Ljg5Niw0MDQuNzU2IA0KCTEwMy4zOTMsMTY2LjE1MyAzODEuNTc2LDM2NC40NzEgMjU1LjI1Nyw0Ny4wNDUgNDI4LjcyNCwzNDEuMzY2IDQ0Mi40MzYsMCA0ODEuMTk3LDMzOS40MzUgNjMyLjU2NiwzMy4xNTcgNTI5LjkyLDM1OS4wMTIgDQoJNzkyLjc3NiwxNDAuNzgyIDU2Ni40NjgsMzk2LjcxNCA4OTUuMzU2LDMwNC4yNjQgNTg0LjUxNCw0NDYuMDIxIDkyMi41NzQsNDk1LjMzNiA1ODAuOTUxLDQ5OC40MDkgODY5LjcyNCw2ODAuOTY0IA0KCTU1Ni4zODgsNTQ0LjgxNSAiLz4NCjwvc3ZnPg0K') center top no-repeat;
content: '';
height: 921px;
left: 50%;
margin-left: -461.5px;
position: fixed;
top: 60px;
width: 923px;
}
aside:after {
background: url('../images/robot.png') center top no-repeat;
background: url('data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iNDI4LjY5N3B4IiBoZWlnaHQ9Ijk0OS42NDlweCIgdmlld0JveD0iMC4wMDEgLTI3OS4zNTEgNDI4LjY5NyA5NDkuNjQ5Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAuMDAxIC0yNzkuMzUxIDQyOC42OTcgOTQ5LjY0OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Y2lyY2xlIGZpbGw9IiMwNDcyQjYiIGN4PSIyMTYuNDk3IiBjeT0iLTM5LjEzMyIgcj0iNDguODc4Ii8+DQo8Zz4NCgk8cG9seWdvbiBmaWxsPSIjMkJBQkUyIiBwb2ludHM9IjIxNS41NDYsMTkxLjY3NCAzMjguNDA0LDE5MC41OTMgMzIzLjIxMywxODcuMTI3IDIxNS41NDYsMTcyLjY1OSAJIi8+DQoJPHBhdGggZmlsbD0ibm9uZSIgZD0iTTE3My40MDMtNTcuOTk0YzAsMCw4Ljg1NSwzMS41NDgsNDIuMTc4LDMzLjM3OHYtMjQuODMzQzE5MS4xNzUtNDkuNDUsMTczLjQwMy01Ny45OTQsMTczLjQwMy01Ny45OTR6Ii8+DQoJPGNpcmNsZSBmaWxsPSJub25lIiBjeD0iMTkuNzQ5IiBjeT0iLTM2LjQ3NyIgcj0iOC42NDUiLz4NCgk8cGF0aCBmaWxsPSJub25lIiBkPSJNMjE1LjU2LTExMS44OGMtOC44OSwwLTE2LjA5NSw3LjIwNi0xNi4wOTUsMTYuMDk3YzAsMS4zMTcsMC4xNzgsMi41ODksMC40NzUsMy44MTINCgkJYzEuNzE4LTcuMDQ4LDguMDUtMTIuMjg1LDE1LjYyLTEyLjI4NWMwLjAwOCwwLDAuMDE1LDAuMDA0LDAuMDIxLDAuMDA0di03LjYyOUMyMTUuNTc0LTExMS44OCwyMTUuNTY3LTExMS44OCwyMTUuNTYtMTExLjg4eiIvPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMjE1LjU0NiwxNzIuNjUyIDEwNy41MDcsMTg3LjcxMiAxMDMuODY1LDE5MC45ODIgMjE1LjU0NiwxOTEuNjY3IAkiLz4NCgk8cG9seWdvbiBmaWxsPSIjMDU4REQxIiBwb2ludHM9IjIxNS41NDYsMTYyLjYxNSAyMTUuNTQ2LDE2Mi41OTUgMTA0LjAxNCwxODcuNzIzIDEwNy41MDcsMTg3LjcxMiAyMTUuNTQ2LDE3NC4wNjkgCSIvPg0KCTxwYXRoIGZpbGw9IiMyQkFCRTIiIGQ9Ik0yMTAuMzEsMjgwLjQzNXYtMTAuMjU4Yy0yLjE2MS0wLjUxNS00LjE4OC0xLjM3LTYuMDI2LTIuNTA0bC03LjI1OSw3LjI1OGwtNi44MzktNi44MzdsNy4yNTktNy4yNTINCgkJYy0xLjEzNS0xLjg0LTEuOTg4LTMuODY2LTIuNTA1LTYuMDM0aC0xMC4yNTd2LTkuNjY1aDEwLjI1N2MwLjUxNi0yLjE2MywxLjM2OS00LjE5MiwyLjUwMi02LjAzMmwtNy4yNTYtNy4yNTJsNi44MzktNi44NA0KCQlsNy4yNTksNy4yNTNjMS44MzktMS4xMjksMy44NjUtMS45OCw2LjAyNi0yLjQ5NnYtMTAuMjYxaDUuMjcxbC0wLjAzNS0yOS4yNjRIMTA0LjA1M2MxLjE0NCwxMi45MzMsMi41MzMsMjYuNTkyLDQuMjEyLDM5LjI2OQ0KCQljMTAuNzA4LDAuNzQzLDI5LjQ5NywxLjg5NSw1My44NiwyLjgyM2MtMS42MjgsNS4yNDctMi41MDUsMTAuODI0LTIuNTA1LDE2LjYwNGMwLDguMzMxLDEuODMxLDE2LjIzNiw1LjA5OSwyMy4zMzYNCgkJYy0xOS40MzctMC44MjQtMzcuNjktMS45ODctNDkuOTMtMi44NDRjMy4wNDgsMTUuMjEsNi42NTUsMjkuNTEzLDEwLjkzOSw0Mi4yODRsLTAuNTcyLDAuMDcybC0wLjAwNiwwLjAxNA0KCQljMC4zODMsMCwwLjYwNCwwLDAuNjA0LDBzMjEuODEsMTIuMDQ3LDQ2LjUwMywxMC44MTRjMCwwLTIwLjExOSw3LjM3NC01MC41MjgsMC42NDJjLTcuMywyNS4yMDYtMjQuMDIzLDg3LjQ4NS0yNy44NTUsMTQxLjE2NQ0KCQljLTAuMDc2LDEuMDQ2LTAuMTUxLDIuMTAzLTAuMjMsMy4xNjJsMTQuOTA0LDEuMDkzYzIuODgtNy44NTUsMTAuNDAyLTEzLjQ2NSwxOS4yNTMtMTMuNDY1YzkuOTEyLDAsMTguMTgzLDcuMDIxLDIwLjEwNywxNi4zNjENCgkJbDEzLjEwNCwwLjk2NGMwLjU2Mi0yLjIyMywxLjExOS00LjQzMywxLjY4Ny02LjYzNmMxMC45MTctNDIuNDYxLDMzLjY0NC05Ny4xMjUsNTIuODgxLTEzMi4yMTJsMTIuMTk5LTUzLjI1OUgyMTAuMzFWMjgwLjQzNXoiLz4NCgk8cGF0aCBmaWxsPSIjMkJBQkUyIiBkPSJNMTQ3LjU4OCw0ODEuMTU1Yy0yLjM3Niw4LjcxMS0xMC4zMjEsMTUuMTIyLTE5Ljc4OCwxNS4xMjJjLTEwLjg4OCwwLTE5Ljc3NC04LjQ4OS0yMC40Ni0xOS4yMDcNCgkJbC0xNC4yNzctMS40NDZDODguOTA1LDUzMi4yNiw4My41OSw1OTQuMTk3LDgyLjA5OSw2MTEuMzhjNi42NzEsNS42MjgsMTguMzY0LDExLjcyNywxOC4zNjQsMTEuNzI3cy0xNi4yMzItMi41OTMtMjQuNjIyLTYuNjY2DQoJCWMtNzYuMDIxLDUuODg2LTQ5LjM5Myw0OC40NDQtMzYuOTIxLDUyLjc2NmM2LjcyMiwyLjMyOCw2NC41MDQsMC4yMDgsNjQuNTA0LDAuMjA4YzQxLjQ5My0xLjk3Myw0MS42NTUtOS44ODIsNDEuNDkzLTIwLjU3Nw0KCQljLTAuMTcyLTEwLjcwNS0xMy44MzQtMzIuNzcyLTEzLjgzNC0zMi43NzJzMTEuNzU4LTY4Ljg1MiwyNy41MjktMTMzLjc5NUwxNDcuNTg4LDQ4MS4xNTV6Ii8+DQoJPHBhdGggZmlsbD0iIzJCQUJFMiIgZD0iTTE4Ni42NDgsOTUuNTg4YzAsMTUuNzQsMTIuNzUsMjguNTAxLDI4LjQ5NiwyOC41MDFjMC4xNDgsMCwwLjI4OC0wLjAxOSwwLjQzNy0wLjAxOXYtNC40MjcNCgkJYy0wLjE0NiwwLjAwNC0wLjI4NywwLjAyNC0wLjQzNywwLjAyNGMtMTMuMzAzLDAtMjQuMDgxLTEwLjc3OS0yNC4wODEtMjQuMDhjMC0wLjc5MiwwLjA0Ny0xLjU2NCwwLjEyMS0yLjMzMg0KCQljMC4wMTktMC4xODksMC4wNS0wLjM3MiwwLjA3NC0wLjU1N2MwLjA2NS0wLjU1NCwwLjE0Ni0xLjEsMC4yNDgtMS42MzljMC4wNTUtMC4yNzYsMC4xMTYtMC41NTQsMC4xNzktMC44MjUNCgkJYzAuMDk4LTAuNDI5LDAuMjA1LTAuODQ5LDAuMzI1LTEuMjY4YzAuMDk0LTAuMzI0LDAuMTkxLTAuNjQ5LDAuMjk2LTAuOTczYzAuMTExLTAuMzI5LDAuMjM0LTAuNjUzLDAuMzU4LTAuOTc3DQoJCWMwLjE0Ni0wLjM3MywwLjI4NS0wLjc0OSwwLjQ0NC0xLjExNWMwLjA3Mi0wLjE1NywwLjE1MS0wLjMxLDAuMjI3LTAuNDY3YzAuNzQ2LTEuNTk3LDEuNjU1LTMuMDk3LDIuNzE2LTQuNDc5DQoJCWMwLjAzMS0wLjAzOSwwLjA1NS0wLjA3NiwwLjA4NS0wLjExNWMwLDAuMDA2LTAuMDAzLDAuMDA2LTAuMDAzLDAuMDFjMi4xNjEtMi43ODMsNC45MTUtNS4wODEsOC4wOC02LjY5NWgtMC4wMTcNCgkJYzAuMDUxLTAuMDMsMC4xMDktMC4wNDIsMC4xNjItMC4wNzJjMC42OTctMC4zNTMsMS40MTYtMC42NjcsMi4xNTEtMC45NWMwLjE3OS0wLjA3LDAuMzU5LTAuMTMzLDAuNTQtMC4xOTkNCgkJYzAuNjI4LTAuMjI0LDEuMjctMC40MjUsMS45MjEtMC41OTdjMC4yNTgtMC4wNjYsMC41MTQtMC4xMzcsMC43NzUtMC4xOTljMC41OTgtMC4xMzUsMS4yMDQtMC4yNDQsMS44MTQtMC4zMzMNCgkJYzAuMy0wLjA0MiwwLjU5NS0wLjEwMSwwLjg5NS0wLjEzNGMwLjczNS0wLjA4NLine truncated
content: '';
height: 949px;
left: 50%;
margin-left: -215px;
position: fixed;
top: 165px;
width: 429px;
z-index: 1;
}
aside .wrapper {
background: #2babe1;
border-top: 5px solid #edf6ff;
margin: -5px auto 0;
max-width: 1040px;
padding: 40px 0 30px 0;
position: relative;
width: 100%;
z-index: 2;
}
aside .wrapper:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
aside .wrapper h3 {
color: #00374f;
font-size: 24px;
margin-top: 0;
}
aside .wrapper a {
color: #edf6ff;
}
aside .wrapper a.designer-name {
color: #00374f;
}
aside .wrapper ul {
list-style: none;
padding: 0;
}
aside .wrapper ul li {
margin-bottom: 12px;
}
aside .wrapper ul li:last-child {
margin-bottom: 0;
}
aside .wrapper .design-selection {
border-right: 2px solid #edf6ff;
float: left;
margin-right: 40px;
width: 50%;
}
aside .wrapper .design-selection .design-name {
display: block;
}
aside .wrapper .zen-resources {
margin-top: 40px;
}
.supporting footer {
background: #00374f;
font-size: 22px;
height: 65px;
text-align: center;
width: 100%;
}
.supporting footer a {
color: #edf6ff;
margin-right: 25px;
vertical-align: -1em;
}
.supporting footer a:last-child {
margin-right: 0;
}
@media (max-width: 1040px) {
.intro {
height: 700px;
}
.intro .summary {
left: auto;
margin-top: 15px;
text-align: center;
top: auto;
}
.intro .summary p {
float: none;
margin: 0 auto 10px;
max-width: 300px;
width: 90%;
}
.preamble {
left: auto;
margin: 0 2.5% 0 5%;
top: 413px;
width: 42.5%;
}
.explanation {
margin: 0 5% 0 2.5%;
width: 42.5%;
}
.participation h3,
.participation p {
left: auto;
margin-left: 5%;
width: 47%;
}
.participation:after {
background-position: center;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
float: right;
margin: -330px 5% 0 0;
min-width: 0;
position: static;
width: 40%;
}
.benefits h3,
.benefits p {
margin-right: 5%;
width: 47%;
}
.benefits:after {
background-position: center;
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
clear: left;
margin: -230px 0 0 5%;
min-width: 0;
position: static;
width: 40%;
}
.requirements {
left: auto;
margin-left: 0;
padding: 0 5%;
width: 90%;
}
.requirements p:nth-child(4) {
right: 5%;
width: 42.5%;
}
.requirements p:last-child {
padding: 0 20% 20px;
width: 60%;
}
aside:before {
top: 170px;
}
aside:after {
-webkit-animation: rise-short 1.5s 1 ease;
-moz-animation: rise-short 1.5s 1 ease;
-ms-animation: rise-short 1.5s 1 ease;
-o-animation: rise-short 1.5s 1 ease;
top: 275px;
}
aside .wrapper {
padding: 40px 5% 30px;
width: 90%;
}
}
@media (max-width: 750px) {
.intro header h1 {
font-size: 60px;
min-height: 50px;
margin-top: 35px;
}
.intro header h2 {
max-width: 455px;
}
.intro .summary {
margin-top: 35px;
}
.intro .preamble {
top: 433px;
}
}
@media (max-width: 650px) {
.intro {
height: 985px;
position: relative;
}
.intro .preamble {
background: rgba(255, 255, 255, 0.9);
border-top: 5px solid #dd3b2a;
bottom: 0;
margin: 0;
max-width: none;
padding: 25px 0;
position: absolute;
top: auto;
width: 100%;
}
.intro .preamble h3,
.intro .preamble p {
width: 85%;
margin: 0 auto;
}
.supporting {
border-top: none;
}
.supporting footer {
font-size: 18px;
}
.supporting footer a {
vertical-align: -1.25em;
}
.explanation {
float: none;
left: auto;
margin: 0;
max-width: none;
padding: 0 7.5% 10px;
width: 85%;
}
.participation h3,
.participation p {
float: none;
margin: 0 auto;
width: 85%;
}
.participation:after {
float: none;
margin: 50px auto 0;
width: 80%;
}
.benefits h3,
.benefits p {
float: none;
left: auto;
margin: auto;
width: 85%;
}
.benefits:after {
background-position: center;
float: none;
margin: 50px auto 0;
width: 80%;
}
.requirements {
padding: 0 7.5%;
width: 85%;
}
.requirements p {
float: none;
position: static !important;
width: 100% !important;
}
.requirements p:last-child {
padding: 0 0 20px;
}
aside .wrapper .design-selection,
aside .wrapper > div {
border: none;
float: none;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
}
aside .wrapper .design-archives {
margin-top: 40px;
}
aside .wrapper > div h3 {
margin: 0;
}
aside .wrapper > div ul {
margin-top: 0;
}
aside:after {
-webkit-background-size: contain;
-moz-background-size: contain;
background-size: contain;
left: auto;
margin: 0 5%;
width: 90%;
}
}
@media (max-width: 500px) {
.intro header h1 {
background: white;
font-size: 40px;
line-height: 1em;
margin: 15px 0 10px;
min-height: 40px;
}
.intro header h1:after {
margin-top: 18px;
}
.intro header h2 {
font-size: 16px;
max-width: 310px;
}
}