<body>
<div class="box-960 box-center group pad-3 s-pad-2">
<section class="grid-12 pad-2-vert s-pad-0-sides">
<h1 class="text-light text-red">Events</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat a vero numquam officiis. Praesentium dolorem optio doloremque libero suscipit, beatae, reiciendis in, dolor dolore fuga enim aperiam obcaecati ratione, omnis!</p>
</section>
<section class="grid-12 pad-3-vert s-pad-0-sides">
<div class="grid-12 border-bottom">
<div class="grid-12 l-grid-6 l-border-right m-border-bottom s-border-bottom marg-2-bottom">
<div class="rel l-pad-2-right pad-2-bottom">
<div class="abs pos-top pos-left z-999">
<div class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-blue">
<span class="text-small-2 letter-space-1 uppercase">Big Data</span>
</div>
</div>
<div class="box-gradient-overlay s-after-hidden">
<img src="http://www.fillmurray.com/450/300" alt="My Great Event guest starring Bill Murray">
</div>
<div class="abs pos-bottom pos-left text-white z-9999 pad-2 s-rel s-text-dark s-pad-0">
<h2 class="text-reg s-pad-2-top">Strata + Hadoop World</h2>
<p class="bold text-small pad-1-bottom">February 17-20, San Jose, CA</p>
<p>Strata + Hadoop World in San Jose is where big data, data science, and new business fundamentals intersect.</p>
</div>
</div>
</div>
<div class="grid-12 l-grid-6">
<div class="rel grid-12 pad-2-left s-pad-0-left">
<div class="abs pos-top pos-left z-999 pad-2-left s-pad-0-left">
<div class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-green">
<span class="text-small-2 letter-space-1 uppercase">Open Source</span>
</div>
</div>
<img class="float-left pad-2-right s-pad-2-bottom" src="http://www.fillmurray.com/160/127" alt="OSCON Event Photo">
<h3 class="text-reg">OSCON 2016</h3>
<p class="bold text-small pad-1-bottom">July 20-24, Portland, OR</p>
<p class="pad-0 text-small">OSCON celebrates, defines, and demonstrates the power of open source in the world today.</p>
</div>
<div class="rel grid-12 pad-2-left s-pad-0-left border-top pad-2-vert marg-2-top">
<div class="abs pos-top pos-left z-999 pad-2-left s-pad-0-left pad-2-top">
<div class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-pink">
<span class="text-small-2 letter-space-1 uppercase">Web Platform</span>
</div>
</div>
<img class="float-left pad-2-right s-pad-2-bottom" src="http://stevensegallery.com/160/127" alt="Fluent Conference Event Photo">
<h3 class="text-reg">Fluent</h3>
<p class="bold text-small pad-1-bottom">April 20-22, San Francisco, CA</p>
<p class="pad-0 text-small">O’Reilly’s Fluent Conference was created to give web developers a place to gather and learn from each other.</p>
</div>
</div>
</div>
<div class="grid-12 border-bottom grid-flex">
<div class="grid-3 m-grid-6 s-grid-12 pad-2 s-pad-0-sides border-right s-border-right-0 border-bottom l-border-bottom-0">
<div class="marg-1-top marg-2-bottom">
<span class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-blue-lt">
<span class="text-small-2 letter-space-1 uppercase">Programming</span>
</span>
</div>
<h5 class="text-reg">Software Architecture Conference</h5>
<p class="bold text-small pad-1-bottom">March 16-19, Boston, MA</p>
<p class="text-small pad-0">This new event provides the in-depth professional training that software architects and aspiring software architects need to succeed.</p>
</div>
<div class="grid-3 m-grid-6 s-grid-12 pad-2 s-pad-0-sides l-border-right border-bottom l-border-bottom-0">
<div class="marg-1-top marg-2-bottom">
<span class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-blue">
<span class="text-small-2 letter-space-1 uppercase">Big Data</span>
</span>
</div>
<h5 class="text-reg">Strata + Hadoop World</h5>
<p class="bold text-small pad-1-bottom">May 5-7, London, England</p>
<p class="text-small pad-0">Strata + Hadoop World brings together leading minds in big data; decision makers using the power of data to drive business strategy and practicioners.</p>
</div>
<div class="grid-3 m-grid-6 s-grid-12 pad-2 s-pad-0-sides border-right s-border-right-0 s-border-bottom">
<div class="marg-1-top marg-2-bottom">
<span class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-green-dk">
<span class="text-small-2 letter-space-1 uppercase">Web Ops</span>
</span>
</div>
<h5 class="text-reg">Velocity</h5>
<p class="bold text-small pad-1-bottom">May 27-29, Santa Clara, CA</p>
<p class="text-small pad-0">Build a faster and stronger web for the future and today. Velocity is about the people and technologies that keep the web fast.</p>
</div>
<div class="grid-3 m-grid-6 s-grid-12 pad-2 s-pad-0-sides">
<div class="marg-1-top marg-2-bottom">
<span class="pad-1-sides pad-half-vert bgr-grey-lt border-left-6-purple">
<span class="text-small-2 letter-space-1 uppercase">Internet of Things</span>
</span>
</div>
<h5 class="text-reg">Solid</h5>
<p class="bold text-small pad-1-bottom">June 23-25, San Francisco, CA</p>
<p class="text-small pad-0">The programming world is creating disruptive innovation as profound as the Internet itself.</p>
</div>
</div>
</section>
</div>
</body>@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,700,400italic,200,200italic);
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0;
padding: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
margin: 0
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
dfn {
font-style: italic
}
mark {
background: #ff0;
color: #000
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sup {
top: -0.5em
}
sub {
bottom: -0.25em
}
img {
border: 0
}
svg:not(:root) {
overflow: hidden
}
hr {
box-sizing: content-box;
height: 0
}
pre {
overflow: auto
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0
}
button {
overflow: visible
}
button,
select {
text-transform: none
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer
}
button[disabled],
html input[disabled] {
cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0
}
input {
line-height: normal
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto
}
input[type="search"] {
-webkit-appearance: textfield
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em
}
legend {
border: 0;
padding: 0
}
textarea {
overflow: auto
}
optgroup {
font-weight: bold
}
table {
border-collapse: collapse;
border-spacing: 0
}
td,
th {
padding: 0
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none
}
::selection {
background: #b3d4fc;
text-shadow: none
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle
}
fieldset {
border: 0;
margin: 0;
padding: 0
}
textarea {
resize: vertical
}
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: " (" attr(href) ")"
}
abbr[title]:after {
content: " (" attr(title) ")"
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
p,
h2,
h3 {
orphans: 3;
widows: 3
}
h2,
h3 {
page-break-after: avoid
}
}
html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
.grid,
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
margin: 0;
clear: none;
float: left
}
.grid-1 {
width: 8.33333%
}
.grid-2 {
width: 16.66667%
}
.grid-3 {
width: 25%
}
.grid-4 {
width: 33.33333%
}
.grid-5 {
width: 41.66667%
}
.grid-6 {
width: 50%
}
.grid-7 {
width: 58.33333%
}
.grid-8 {
width: 66.66667%
}
.grid-9 {
width: 75%
}
.grid-10 {
width: 83.33333%
}
.grid-11 {
width: 91.66667%
}
.grid-12 {
width: 100%
}
.offset-0 {
margin-left: 0
}
.offset-1 {
margin-left: 8.33333%
}
.offset-2 {
margin-left: 16.66667%
}
.offset-3 {
margin-left: 25%
}
.offset-4 {
margin-left: 33.33333%
}
.offset-5 {
margin-left: 41.66667%
}
.offset-6 {
margin-left: 50%
}
.offset-7 {
margin-left: 58.33333%
}
.offset-8 {
margin-left: 66.66667%
}
.offset-9 {
margin-left: 75%
}
.offset-10 {
margin-left: 83.33333%
}
.offset-11 {
margin-left: 91.66667%
}
.offset-12 {
margin-left: 100%
}
.pad-1 {
padding: 8px
}
.pad-1-left {
padding-left: 8px
}
.pad-1-right {
padding-right: 8px
}
.pad-1-top {
padding-top: 8px
}
.pad-1-bottom {
padding-bottom: 8px
}
.pad-1-sides {
padding-left: 8px;
padding-right: 8px
}
.pad-1-vert {
padding-top: 8px;
padding-bottom: 8px
}
.marg-1 {
margin: 8px
}
.marg-1-left {
margin-left: 8px
}
.marg-1-right {
margin-right: 8px
}
.marg-1-top {
margin-top: 8px
}
.marg-1-bottom {
margin-bottom: 8px
}
.marg-1-sides {
margin-left: 8px;
margin-right: 8px
}
.marg-1-vert {
margin-top: 8px;
margin-bottom: 8px
}
.pad-2 {
padding: 16px
}
.pad-2-left {
padding-left: 16px
}
.pad-2-right {
padding-right: 16px
}
.pad-2-top {
padding-top: 16px
}
.pad-2-bottom {
padding-bottom: 16px
}
.pad-2-sides {
padding-left: 16px;
padding-right: 16px
}
.pad-2-vert {
padding-top: 16px;
padding-bottom: 16px
}
.marg-2 {
margin: 16px
}
.marg-2-left {
margin-left: 16px
}
.marg-2-right {
margin-right: 16px
}
.marg-2-top {
margin-top: 16px
}
.marg-2-bottom {
margin-bottom: 16px
}
.marg-2-sides {
margin-left: 16px;
margin-right: 16px
}
.marg-2-vert {
margin-top: 16px;
margin-bottom: 16px
}
.pad-3 {
padding: 32px
}
.pad-3-left {
padding-left: 32px
}
.pad-3-right {
padding-right: 32px
}
.pad-3-top {
padding-top: 32px
}
.pad-3-bottom {
padding-bottom: 32px
}
.pad-3-sides {
padding-left: 32px;
padding-right: 32px
}
.pad-3-vert {
padding-top: 32px;
padding-bottom: 32px
}
.marg-3 {
margin: 32px
}
.marg-3-left {
margin-left: 32px
}
.marg-3-right {
margin-right: 32px
}
.marg-3-top {
margin-top: 32px
}
.marg-3-bottom {
margin-bottom: 32px
}
.marg-3-sides {
margin-left: 32px;
margin-right: 32px
}
.marg-3-vert {
margin-top: 32px;
margin-bottom: 32px
}
.pad-0 {
padding: 0
}
.pad-0-left {
padding-left: 0
}
.pad-0-right {
padding-right: 0
}
.pad-0-top {
padding-top: 0
}
.pad-0-bottom {
padding-bottom: 0
}
.pad-0-sides {
padding-left: 0;
padding-right: 0
}
.pad-0-vert {
padding-top: 0;
padding-bottom: 0
}
.marg-0 {
margin: 0
}
.marg-0-left {
margin-left: 0
}
.marg-0-right {
margin-right: 0
}
.marg-0-top {
margin-top: 0
}
.marg-0-bottom {
margin-bottom: 0
}
.marg-0-sides {
margin-left: 0;
margin-right: 0
}
.marg-0-vert {
margin-top: 0;
margin-bottom: 0
}
@media (max-width: 481px) {
.s-grid,
.s-grid-1,
.s-grid-2,
.s-grid-3,
.s-grid-4,
.s-grid-5,
.s-grid-6,
.s-grid-7,
.s-grid-8,
.s-grid-9,
.s-grid-10,
.s-grid-11,
.s-grid-12 {
margin: 0;
clear: none;
float: left
}
.s-grid-1 {
width: 8.33333%
}
.s-grid-2 {
width: 16.66667%
}
.s-grid-3 {
width: 25%
}
.s-grid-4 {
width: 33.33333%
}
.s-grid-5 {
width: 41.66667%
}
.s-grid-6 {
width: 50%
}
.s-grid-7 {
width: 58.33333%
}
.s-grid-8 {
width: 66.66667%
}
.s-grid-9 {
width: 75%
}
.s-grid-10 {
width: 83.33333%
}
.s-grid-11 {
width: 91.66667%
}
.s-grid-12 {
width: 100%
}
.s-offset-0 {
margin-left: 0
}
.s-offset-1 {
margin-left: 8.33333%
}
.s-offset-2 {
margin-left: 16.66667%
}
.s-offset-3 {
margin-left: 25%
}
.s-offset-4 {
margin-left: 33.33333%
}
.s-offset-5 {
margin-left: 41.66667%
}
.s-offset-6 {
margin-left: 50%
}
.s-offset-7 {
margin-left: 58.33333%
}
.s-offset-8 {
margin-left: 66.66667%
}
.s-offset-9 {
margin-left: 75%
}
.s-offset-10 {
margin-left: 83.33333%
}
.s-offset-11 {
margin-left: 91.66667%
}
.s-offset-12 {
margin-left: 100%
}
.s-pad-1 {
padding: 8px
}
.s-pad-1-left {
padding-left: 8px
}
.s-pad-1-right {
padding-right: 8px
}
.s-pad-1-top {
padding-top: 8px
}
.s-pad-1-bottom {
padding-bottom: 8px
}
.s-pad-1-sides {
padding-left: 8px;
padding-right: 8px
}
.s-pad-1-vert {
padding-top: 8px;
padding-bottom: 8px
}
.s-marg-1 {
margin: 8px
}
.s-marg-1-left {
margin-left: 8px
}
.s-marg-1-right {
margin-right: 8px
}
.s-marg-1-top {
margin-top: 8px
}
.s-marg-1-bottom {
margin-bottom: 8px
}
.s-marg-1-sides {
margin-left: 8px;
margin-right: 8px
}
.s-marg-1-vert {
margin-top: 8px;
margin-bottom: 8px
}
.s-pad-2 {
padding: 16px
}
.s-pad-2-left {
padding-left: 16px
}
.s-pad-2-right {
padding-right: 16px
}
.s-pad-2-top {
padding-top: 16px
}
.s-pad-2-bottom {
padding-bottom: 16px
}
.s-pad-2-sides {
padding-left: 16px;
padding-right: 16px
}
.s-pad-2-vert {
padding-top: 16px;
padding-bottom: 16px
}
.s-marg-2 {
margin: 16px
}
.s-marg-2-left {
margin-left: 16px
}
.s-marg-2-right {
margin-right: 16px
}
.s-marg-2-top {
margin-top: 16px
}
.s-marg-2-bottom {
margin-bottom: 16px
}
.s-marg-2-sides {
margin-left: 16px;
margin-right: 16px
}
.s-marg-2-vert {
margin-top: 16px;
margin-bottom: 16px
}
.s-pad-3 {
padding: 32px
}
.s-pad-3-left {
padding-left: 32px
}
.s-pad-3-right {
padding-right: 32px
}
.s-pad-3-top {
padding-top: 32px
}
.s-pad-3-bottom {
padding-bottom: 32px
}
.s-pad-3-sides {
padding-left: 32px;
padding-right: 32px
}
.s-pad-3-vert {
padding-top: 32px;
padding-bottom: 32px
}
.s-marg-3 {
margin: 32px
}
.s-marg-3-left {
margin-left: 32px
}
.s-marg-3-right {
margin-right: 32px
}
.s-marg-3-top {
margin-top: 32px
}
.s-marg-3-bottom {
margin-bottom: 32px
}
.s-marg-3-sides {
margin-left: 32px;
margin-right: 32px
}
.s-marg-3-vert {
margin-top: 32px;
margin-bottom: 32px
}
.s-pad-0 {
padding: 0
}
.s-pad-0-left {
padding-left: 0
}
.s-pad-0-right {
padding-right: 0
}
.s-pad-0-top {
padding-top: 0
}
.s-pad-0-bottom {
padding-bottom: 0
}
.s-pad-0-sides {
padding-left: 0;
padding-right: 0
}
.s-pad-0-vert {
padding-top: 0;
padding-bottom: 0
}
.s-marg-0 {
margin: 0
}
.s-marg-0-left {
margin-left: 0
}
.s-marg-0-right {
margin-right: 0
}
.s-marg-0-top {
margin-top: 0
}
.s-marg-0-bottom {
margin-bottom: 0
}
.s-marg-0-sides {
margin-left: 0;
margin-right: 0
}
.s-marg-0-vert {
margin-top: 0;
margin-bottom: 0
}
}
@media (min-width: 482px) and (max-width: 959px) {
.m-grid,
.m-grid-1,
.m-grid-2,
.m-grid-3,
.m-grid-4,
.m-grid-5,
.m-grid-6,
.m-grid-7,
.m-grid-8,
.m-grid-9,
.m-grid-10,
.m-grid-11,
.m-grid-12 {
margin: 0;
clear: none;
float: left
}
.m-grid-1 {
width: 8.33333%
}
.m-grid-2 {
width: 16.66667%
}
.m-grid-3 {
width: 25%
}
.m-grid-4 {
width: 33.33333%
}
.m-grid-5 {
width: 41.66667%
}
.m-grid-6 {
width: 50%
}
.m-grid-7 {
width: 58.33333%
}
.m-grid-8 {
width: 66.66667%
}
.m-grid-9 {
width: 75%
}
.m-grid-10 {
width: 83.33333%
}
.m-grid-11 {
width: 91.66667%
}
.m-grid-12 {
width: 100%
}
.m-offset-0 {
margin-left: 0
}
.m-offset-1 {
margin-left: 8.33333%
}
.m-offset-2 {
margin-left: 16.66667%
}
.m-offset-3 {
margin-left: 25%
}
.m-offset-4 {
margin-left: 33.33333%
}
.m-offset-5 {
margin-left: 41.66667%
}
.m-offset-6 {
margin-left: 50%
}
.m-offset-7 {
margin-left: 58.33333%
}
.m-offset-8 {
margin-left: 66.66667%
}
.m-offset-9 {
margin-left: 75%
}
.m-offset-10 {
margin-left: 83.33333%
}
.m-offset-11 {
margin-left: 91.66667%
}
.m-offset-12 {
margin-left: 100%
}
.m-pad-1 {
padding: 8px
}
.m-pad-1-left {
padding-left: 8px
}
.m-pad-1-right {
padding-right: 8px
}
.m-pad-1-top {
padding-top: 8px
}
.m-pad-1-bottom {
padding-bottom: 8px
}
.m-pad-1-sides {
padding-left: 8px;
padding-right: 8px
}
.m-pad-1-vert {
padding-top: 8px;
padding-bottom: 8px
}
.m-marg-1 {
margin: 8px
}
.m-marg-1-left {
margin-left: 8px
}
.m-marg-1-right {
margin-right: 8px
}
.m-marg-1-top {
margin-top: 8px
}
.m-marg-1-bottom {
margin-bottom: 8px
}
.m-marg-1-sides {
margin-left: 8px;
margin-right: 8px
}
.m-marg-1-vert {
margin-top: 8px;
margin-bottom: 8px
}
.m-pad-2 {
padding: 16px
}
.m-pad-2-left {
padding-left: 16px
}
.m-pad-2-right {
padding-right: 16px
}
.m-pad-2-top {
padding-top: 16px
}
.m-pad-2-bottom {
padding-bottom: 16px
}
.m-pad-2-sides {
padding-left: 16px;
padding-right: 16px
}
.m-pad-2-vert {
padding-top: 16px;
padding-bottom: 16px
}
.m-marg-2 {
margin: 16px
}
.m-marg-2-left {
margin-left: 16px
}
.m-marg-2-right {
margin-right: 16px
}
.m-marg-2-top {
margin-top: 16px
}
.m-marg-2-bottom {
margin-bottom: 16px
}
.m-marg-2-sides {
margin-left: 16px;
margin-right: 16px
}
.m-marg-2-vert {
margin-top: 16px;
margin-bottom: 16px
}
.m-pad-3 {
padding: 32px
}
.m-pad-3-left {
padding-left: 32px
}
.m-pad-3-right {
padding-right: 32px
}
.m-pad-3-top {
padding-top: 32px
}
.m-pad-3-bottom {
padding-bottom: 32px
}
.m-pad-3-sides {
padding-left: 32px;
padding-right: 32px
}
.m-pad-3-vert {
padding-top: 32px;
padding-bottom: 32px
}
.m-marg-3 {
margin: 32px
}
.m-marg-3-left {
margin-left: 32px
}
.m-marg-3-right {
margin-right: 32px
}
.m-marg-3-top {
margin-top: 32px
}
.m-marg-3-bottom {
margin-bottom: 32px
}
.m-marg-3-sides {
margin-left: 32px;
margin-right: 32px
}
.m-marg-3-vert {
margin-top: 32px;
margin-bottom: 32px
}
.m-pad-0 {
padding: 0
}
.m-pad-0-left {
padding-left: 0
}
.m-pad-0-right {
padding-right: 0
}
.m-pad-0-top {
padding-top: 0
}
.m-pad-0-bottom {
padding-bottom: 0
}
.m-pad-0-sides {
padding-left: 0;
padding-right: 0
}
.m-pad-0-vert {
padding-top: 0;
padding-bottom: 0
}
.m-marg-0 {
margin: 0
}
.m-marg-0-left {
margin-left: 0
}
.m-marg-0-right {
margin-right: 0
}
.m-marg-0-top {
margin-top: 0
}
.m-marg-0-bottom {
margin-bottom: 0
}
.m-marg-0-sides {
margin-left: 0;
margin-right: 0
}
.m-marg-0-vert {
margin-top: 0;
margin-bottom: 0
}
}
@media (min-width: 960px) {
.l-grid,
.l-grid-1,
.l-grid-2,
.l-grid-3,
.l-grid-4,
.l-grid-5,
.l-grid-6,
.l-grid-7,
.l-grid-8,
.l-grid-9,
.l-grid-10,
.l-grid-11,
.l-grid-12 {
margin: 0;
clear: none;
float: left
}
.l-grid-1 {
width: 8.33333%
}
.l-grid-2 {
width: 16.66667%
}
.l-grid-3 {
width: 25%
}
.l-grid-4 {
width: 33.33333%
}
.l-grid-5 {
width: 41.66667%
}
.l-grid-6 {
width: 50%
}
.l-grid-7 {
width: 58.33333%
}
.l-grid-8 {
width: 66.66667%
}
.l-grid-9 {
width: 75%
}
.l-grid-10 {
width: 83.33333%
}
.l-grid-11 {
width: 91.66667%
}
.l-grid-12 {
width: 100%
}
.l-offset-0 {
margin-left: 0
}
.l-offset-1 {
margin-left: 8.33333%
}
.l-offset-2 {
margin-left: 16.66667%
}
.l-offset-3 {
margin-left: 25%
}
.l-offset-4 {
margin-left: 33.33333%
}
.l-offset-5 {
margin-left: 41.66667%
}
.l-offset-6 {
margin-left: 50%
}
.l-offset-7 {
margin-left: 58.33333%
}
.l-offset-8 {
margin-left: 66.66667%
}
.l-offset-9 {
margin-left: 75%
}
.l-offset-10 {
margin-left: 83.33333%
}
.l-offset-11 {
margin-left: 91.66667%
}
.l-offset-12 {
margin-left: 100%
}
.l-pad-1 {
padding: 8px
}
.l-pad-1-left {
padding-left: 8px
}
.l-pad-1-right {
padding-right: 8px
}
.l-pad-1-top {
padding-top: 8px
}
.l-pad-1-bottom {
padding-bottom: 8px
}
.l-pad-1-sides {
padding-left: 8px;
padding-right: 8px
}
.l-pad-1-vert {
padding-top: 8px;
padding-bottom: 8px
}
.l-marg-1 {
margin: 8px
}
.l-marg-1-left {
margin-left: 8px
}
.l-marg-1-right {
margin-right: 8px
}
.l-marg-1-top {
margin-top: 8px
}
.l-marg-1-bottom {
margin-bottom: 8px
}
.l-marg-1-sides {
margin-left: 8px;
margin-right: 8px
}
.l-marg-1-vert {
margin-top: 8px;
margin-bottom: 8px
}
.l-pad-2 {
padding: 16px
}
.l-pad-2-left {
padding-left: 16px
}
.l-pad-2-right {
padding-right: 16px
}
.l-pad-2-top {
padding-top: 16px
}
.l-pad-2-bottom {
padding-bottom: 16px
}
.l-pad-2-sides {
padding-left: 16px;
padding-right: 16px
}
.l-pad-2-vert {
padding-top: 16px;
padding-bottom: 16px
}
.l-marg-2 {
margin: 16px
}
.l-marg-2-left {
margin-left: 16px
}
.l-marg-2-right {
margin-right: 16px
}
.l-marg-2-top {
margin-top: 16px
}
.l-marg-2-bottom {
margin-bottom: 16px
}
.l-marg-2-sides {
margin-left: 16px;
margin-right: 16px
}
.l-marg-2-vert {
margin-top: 16px;
margin-bottom: 16px
}
.l-pad-3 {
padding: 32px
}
.l-pad-3-left {
padding-left: 32px
}
.l-pad-3-right {
padding-right: 32px
}
.l-pad-3-top {
padding-top: 32px
}
.l-pad-3-bottom {
padding-bottom: 32px
}
.l-pad-3-sides {
padding-left: 32px;
padding-right: 32px
}
.l-pad-3-vert {
padding-top: 32px;
padding-bottom: 32px
}
.l-marg-3 {
margin: 32px
}
.l-marg-3-left {
margin-left: 32px
}
.l-marg-3-right {
margin-right: 32px
}
.l-marg-3-top {
margin-top: 32px
}
.l-marg-3-bottom {
margin-bottom: 32px
}
.l-marg-3-sides {
margin-left: 32px;
margin-right: 32px
}
.l-marg-3-vert {
margin-top: 32px;
margin-bottom: 32px
}
.l-pad-0 {
padding: 0
}
.l-pad-0-left {
padding-left: 0
}
.l-pad-0-right {
padding-right: 0
}
.l-pad-0-top {
padding-top: 0
}
.l-pad-0-bottom {
padding-bottom: 0
}
.l-pad-0-sides {
padding-left: 0;
padding-right: 0
}
.l-pad-0-vert {
padding-top: 0;
padding-bottom: 0
}
.l-marg-0 {
margin: 0
}
.l-marg-0-left {
margin-left: 0
}
.l-marg-0-right {
margin-right: 0
}
.l-marg-0-top {
margin-top: 0
}
.l-marg-0-bottom {
margin-bottom: 0
}
.l-marg-0-sides {
margin-left: 0;
margin-right: 0
}
.l-marg-0-vert {
margin-top: 0;
margin-bottom: 0
}
}
.pad-half {
padding: 4px
}
.pad-half-left {
padding-left: 4px
}
.pad-half-right {
padding-right: 4px
}
.pad-half-top {
padding-top: 4px
}
.pad-half-bottom {
padding-bottom: 4px
}
.pad-half-sides {
padding-left: 4px;
padding-right: 4px
}
.pad-half-vert {
padding-top: 4px;
padding-bottom: 4px
}
.marg-half {
margin: 4px
}
.marg-half-left {
margin-left: 4px
}
.marg-half-right {
margin-right: 4px
}
.marg-half-top {
margin-top: 4px
}
.marg-half-bottom {
margin-bottom: 4px
}
.marg-half-sides {
margin-left: 4px;
margin-right: 4px
}
.marg-half-vert {
margin-top: 4px;
margin-bottom: 4px
}
.grid-flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-wrap: wrap;
-webkit-box-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flexbox-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
html {
font-family: 'Titillium Web', sans-serif;
color: #234;
font-size: 1em;
line-height: 1.6
}
header,
footer {
width: 100%
}
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
margin: 0;
padding: 0
}
h1,
.h1 {
font-size: 5em;
line-height: 1.1
}
h2,
.h2 {
font-size: 2.5em;
line-height: 1.1
}
h3,
.h3 {
font-size: 1.75em;
line-height: 1.3
}
h4,
.h4,
legend {
font-size: 1.375em
}
h5,
.h5 {
font-size: 1.2em
}
h6,
.h6,
.p {
font-size: 1em
}
p,
pre,
blockquote {
margin: 0;
padding: 0 0 16px;
font-size: 1em;
font-weight: normal
}
code {
font-family: Monaco, monospace;
font-size: .9em
}
@media (max-width: 480px) {
h1,
.h1 {
font-size: 4em
}
}
ul {
padding-left: 1.5em
}
ul ul {
padding-top: 8px
}
li {
padding-bottom: 8px
}
fieldset {
margin-bottom: 16px
}
select {
width: 100%
}
input,
textarea {
width: 100%;
padding: 4px 8px;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}
input[type=checkbox],
input[type=radio] {
width: auto;
height: auto;
margin: 0 8px 0 0
}
label {
width: 100%;
display: block
}
input.error,
select.error,
textarea.error {
border: dotted 1px #cd242a
}
input[disabled],
select[disabled],
input[readonly],
select[readonly] {
background-color: #eee;
color: #888
}
input[readonly] {
cursor: text
}
.tooltip {
position: absolute;
top: 12px;
right: 12px;
background-color: #9fc74d;
color: white;
transform: translateY(-100%);
border: solid 2px #fff
}
.tooltip:after {
top: 100%;
right: 16px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-top-color: #9fc74d;
border-width: 6px
}
.tooltip-hover {
visibility: hidden
}
div:hover>.tooltip-hover {
visibility: visible
}
.tooltip.error:after {
border-top-color: #cd242a
}
button,
.btn {
display: inline-block;
background: #9fc74d;
width: auto;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s ease-in-out;
border: none;
text-decoration: none;
outline: none;
margin-bottom: 4px
}
button:hover,
.btn:hover {
background: #5bb12f
}
.pad-btn {
padding: 4px 8px
}
.btn-blue {
background: #287dbe
}
.btn-blue:hover {
background: #384992
}
.btn-pink {
background: #ec66a2
}
.btn-pink:hover {
background: #9e579e
}
.btn-wide {
width: 100%
}
.btn-wide {
width: 100%
}
.btn-small {
padding: 3px 6px;
font-size: 80%
}
.btn-large {
padding: 8px 16px;
font-size: 1.2em
}
.btn-huge {
padding: 16px 24px;
font-size: 1.375em
}
p a,
li a,
blockquote a,
cite a,
.link-text {
color: #287dbe;
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
text-decoration: none
}
p a:hover,
li a:hover,
blockquote a:hover,
cite a:hover,
.link-text:hover {
border-bottom: solid 1px rgba(0, 0, 0, 0.12)
}
table {
margin-bottom: 16px
}
th,
td,
caption {
padding: 8px;
text-align: left;
border-bottom: solid 1px #ddd
}
.modal-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(66, 66, 66, 0.8);
visibility: hidden;
z-index: 9999999
}
.modal {
position: relative
}
.modal-close {
position: absolute;
top: 0;
right: 0;
text-decoration: none;
color: #777;
line-height: .5;
font-size: 24px
}
.box-320 {
max-width: 320px
}
.box-400 {
max-width: 400px
}
.box-480 {
max-width: 480px
}
.box-560 {
max-width: 560px
}
.box-640 {
max-width: 640px
}
.box-720 {
max-width: 720px
}
.box-800 {
max-width: 800px
}
.box-960 {
max-width: 960px
}
.box-1100 {
max-width: 1100px
}
.box-1200 {
max-width: 1200px
}
.box-center {
margin-left: auto;
margin-right: auto
}
.box-gradient-overlay {
display: block;
position: relative
}
.box-gradient-overlay:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: inline-block;
background: linear-gradient(to bottom, transparent 50%, #000 100%)
}
.box-gradient-overlay img {
width: 100%
}
dt,
strong,
.bold {
font-weight: bold
}
em,
.italic {
font-style: italic
}
small,
.text-small {
font-size: 0.8em
}
.text-small-2 {
font-size: 0.7em
}
.text-smaller {
font-size: 80%
}
.text-reg {
font-weight: normal
}
.text-light {
font-weight: 200
}
.uppercase {
text-transform: uppercase
}
.lowercase {
text-transform: lowercase
}
.letter-space-1 {
letter-spacing: 1px
}
.bgr-blue-lt {
background-color: #75c5df
}
.bgr-blue {
background-color: #287dbe
}
.bgr-blue-dk {
background-color: #384992
}
.bgr-green {
background-color: #9fc74d
}
.bgr-green-dk {
background-color: #5bb12f
}
.bgr-white {
background-color: #fff
}
.bgr-dark {
background-color: #234
}
.bgr-grey-lt {
background-color: #f7f7f7
}
.bgr-grey {
background-color: #999
}
.bgr-pink {
background-color: #ec66a2
}
.bgr-purple {
background-color: #9e579e
}
.bgr-red {
background-color: #cd242a
}
.text-blue-lt {
color: #75c5df
}
.text-blue {
color: #287dbe
}
.text-blue-dk {
color: #384992
}
.text-green {
color: #9fc74d
}
.text-green-dk {
color: #5bb12f
}
.text-white {
color: #fff
}
.text-dark {
color: #234
}
.text-grey-lt {
color: #f7f7f7
}
.text-grey {
color: #999
}
.text-pink {
color: #ec66a2
}
.text-purple {
color: #9e579e
}
.text-red {
color: #cd242a
}
.hidden {
display: none !important
}
.transparent {
opacity: 0
}
.group:before,
.group:after {
content: " ";
display: table
}
.group:after {
clear: both
}
.inline {
display: inline-block;
*display: inline;
*zoom: 1;
width: auto
}
.grid-flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-wrap: wrap;
-webkit-box-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flexbox-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.wide {
width: 100%
}
.pos-top {
top: 0
}
.pos-bottom {
bottom: 0
}
.pos-right {
right: 0
}
.pos-left {
left: 0
}
.z-999 {
z-index: 99
}
.z-999 {
z-index: 999
}
.z-9999 {
z-index: 9999
}
.z-99999 {
z-index: 99999
}
.rounded {
border-radius: 4px
}
.border {
border: solid 1px rgba(0, 0, 0, 0.1)
}
.border-dashed {
border-style: dashed
}
.border-dotted {
border-style: dotted
}
.rel {
position: relative
}
.abs {
position: absolute
}
.float-none {
float: none
}
.float-right {
float: right
}
.float-left {
float: left
}
.text-center {
text-align: center
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-dark {
color: #234
}
.hidden {
display: none
}
.border-0 {
border: none
}
.border-top {
border-top: solid 1px rgba(0, 0, 0, 0.1)
}
.border-bottom {
border-bottom: solid 1px rgba(0, 0, 0, 0.1)
}
.border-left {
border-left: solid 1px rgba(0, 0, 0, 0.1)
}
.border-right {
border-right: solid 1px rgba(0, 0, 0, 0.1)
}
.border-top-0 {
border-top: none
}
.border-bottom-0 {
border-bottom: none
}
.border-left-0 {
border-left: none
}
.border-right-0 {
border-right: none
}
.before-hidden:before {
display: none
}
.after-hidden:after {
display: none
}
@media (max-width: 481px) {
.s-rel {
position: relative
}
.s-abs {
position: absolute
}
.s-float-none {
float: none
}
.s-float-right {
float: right
}
.s-float-left {
float: left
}
.s-text-center {
text-align: center
}
.s-text-left {
text-align: left
}
.s-text-right {
text-align: right
}
.s-text-dark {
color: #234
}
.s-hidden {
display: none
}
.s-border-0 {
border: none
}
.s-border-top {
border-top: solid 1px rgba(0, 0, 0, 0.1)
}
.s-border-bottom {
border-bottom: solid 1px rgba(0, 0, 0, 0.1)
}
.s-border-left {
border-left: solid 1px rgba(0, 0, 0, 0.1)
}
.s-border-right {
border-right: solid 1px rgba(0, 0, 0, 0.1)
}
.s-border-top-0 {
border-top: none
}
.s-border-bottom-0 {
border-bottom: none
}
.s-border-left-0 {
border-left: none
}
.s-border-right-0 {
border-right: none
}
.s-before-hidden:before {
display: none
}
.s-after-hidden:after {
display: none
}
}
@media (min-width: 482px) and (max-width: 959px) {
.m-rel {
position: relative
}
.m-abs {
position: absolute
}
.m-float-none {
float: none
}
.m-float-right {
float: right
}
.m-float-left {
float: left
}
.m-text-center {
text-align: center
}
.m-text-left {
text-align: left
}
.m-text-right {
text-align: right
}
.m-text-dark {
color: #234
}
.m-hidden {
display: none
}
.m-border-0 {
border: none
}
.m-border-top {
border-top: solid 1px rgba(0, 0, 0, 0.1)
}
.m-border-bottom {
border-bottom: solid 1px rgba(0, 0, 0, 0.1)
}
.m-border-left {
border-left: solid 1px rgba(0, 0, 0, 0.1)
}
.m-border-right {
border-right: solid 1px rgba(0, 0, 0, 0.1)
}
.m-border-top-0 {
border-top: none
}
.m-border-bottom-0 {
border-bottom: none
}
.m-border-left-0 {
border-left: none
}
.m-border-right-0 {
border-right: none
}
.m-before-hidden:before {
display: none
}
.m-after-hidden:after {
display: none
}
}
@media (min-width: 960px) {
.l-rel {
position: relative
}
.l-abs {
position: absolute
}
.l-float-none {
float: none
}
.l-float-right {
float: right
}
.l-float-left {
float: left
}
.l-text-center {
text-align: center
}
.l-text-left {
text-align: left
}
.l-text-right {
text-align: right
}
.l-text-dark {
color: #234
}
.l-hidden {
display: none
}
.l-border-0 {
border: none
}
.l-border-top {
border-top: solid 1px rgba(0, 0, 0, 0.1)
}
.l-border-bottom {
border-bottom: solid 1px rgba(0, 0, 0, 0.1)
}
.l-border-left {
border-left: solid 1px rgba(0, 0, 0, 0.1)
}
.l-border-right {
border-right: solid 1px rgba(0, 0, 0, 0.1)
}
.l-border-top-0 {
border-top: none
}
.l-border-bottom-0 {
border-bottom: none
}
.l-border-left-0 {
border-left: none
}
.l-border-right-0 {
border-right: none
}
.l-before-hidden:before {
display: none
}
.l-after-hidden:after {
display: none
}
}
.border-blue-lt {
border-color: #75c5df
}
.border-blue {
border-color: #287dbe
}
.border-blue-dk {
border-color: #384992
}
.border-green {
border-color: #9fc74d
}
.border-green-dk {
border-color: #5bb12f
}
.border-white {
border-color: #fff
}
.border-dark {
border-color: #234
}
.border-grey-lt {
border-color: #f7f7f7
}
.border-grey {
border-color: #999
}
.border-pink {
border-color: #ec66a2
}
.border-purple {
border-color: #9e579e
}
.border-red {
border-color: #cd242a
}
.border-left-6-blue-lt {
border-left: solid 6px #75c5df
}
.border-left-6-blue {
border-left: solid 6px #287dbe
}
.border-left-6-blue-dk {
border-left: solid 6px #384992
}
.border-left-6-green {
border-left: solid 6px #9fc74d
}
.border-left-6-green-dk {
border-left: solid 6px #5bb12f
}
.border-left-6-pink {
border-left: solid 6px #ec66a2
}
.border-left-6-purple {
border-left: solid 6px #9e579e
}
.border-left-6-red {
border-left: solid 6px #cd242a
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.