Last active
August 14, 2016 13:32
-
-
Save preeteshjain/f44761d004c257642cd310b08f4e1ee7 to your computer and use it in GitHub Desktop.
Skeleton.css with MaterializeCSS Grids
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
/* | |
* Skeleton V2.0.4 | |
* Copyright 2014, Dave Gamache | |
* www.getskeleton.com | |
* Free to use under the MIT license. | |
* http://www.opensource.org/licenses/mit-license.php | |
*/ | |
/* Table of contents | |
–––––––––––––––––––––––––––––––––––––––––––––––––– | |
- Grid | |
- Base Styles | |
- Typography | |
- Links | |
- Buttons | |
- Forms | |
- Lists | |
- Code | |
- Tables | |
- Spacing | |
- Utilities | |
- Clearing | |
- Media Queries | |
*/ | |
/* Grid | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
/* | |
* Materialize v0.97.7 (http://materializecss.com) | |
* Copyright 2014-2015 Materialize | |
* MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE) | |
*/ | |
.container { | |
margin: 0 auto; | |
max-width: 1280px; | |
width: 90%; | |
} | |
@media only screen and (min-width: 601px) { | |
.container { | |
width: 85%; | |
} | |
} | |
@media only screen and (min-width: 993px) { | |
.container { | |
width: 70%; | |
} | |
} | |
.container .row { | |
margin-left: -0.75rem; | |
margin-right: -0.75rem; | |
} | |
.section { | |
padding-top: 1rem; | |
padding-bottom: 1rem; | |
} | |
.section.no-pad { | |
padding: 0; | |
} | |
.section.no-pad-bot { | |
padding-bottom: 0; | |
} | |
.section.no-pad-top { | |
padding-top: 0; | |
} | |
.row { | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 20px; | |
} | |
.row:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.row .col { | |
float: left; | |
box-sizing: border-box; | |
padding: 0 0.75rem; | |
} | |
.row .col[class*="push-"], | |
.row .col[class*="pull-"] { | |
position: relative; | |
} | |
.row .col.s1 { | |
width: 8.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s2 { | |
width: 16.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s3 { | |
width: 25%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s4 { | |
width: 33.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s5 { | |
width: 41.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s6 { | |
width: 50%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s7 { | |
width: 58.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s8 { | |
width: 66.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s9 { | |
width: 75%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s10 { | |
width: 83.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s11 { | |
width: 91.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.s12 { | |
width: 100%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.offset-s1 { | |
margin-left: 8.33333%; | |
} | |
.row .col.pull-s1 { | |
right: 8.33333%; | |
} | |
.row .col.push-s1 { | |
left: 8.33333%; | |
} | |
.row .col.offset-s2 { | |
margin-left: 16.66667%; | |
} | |
.row .col.pull-s2 { | |
right: 16.66667%; | |
} | |
.row .col.push-s2 { | |
left: 16.66667%; | |
} | |
.row .col.offset-s3 { | |
margin-left: 25%; | |
} | |
.row .col.pull-s3 { | |
right: 25%; | |
} | |
.row .col.push-s3 { | |
left: 25%; | |
} | |
.row .col.offset-s4 { | |
margin-left: 33.33333%; | |
} | |
.row .col.pull-s4 { | |
right: 33.33333%; | |
} | |
.row .col.push-s4 { | |
left: 33.33333%; | |
} | |
.row .col.offset-s5 { | |
margin-left: 41.66667%; | |
} | |
.row .col.pull-s5 { | |
right: 41.66667%; | |
} | |
.row .col.push-s5 { | |
left: 41.66667%; | |
} | |
.row .col.offset-s6 { | |
margin-left: 50%; | |
} | |
.row .col.pull-s6 { | |
right: 50%; | |
} | |
.row .col.push-s6 { | |
left: 50%; | |
} | |
.row .col.offset-s7 { | |
margin-left: 58.33333%; | |
} | |
.row .col.pull-s7 { | |
right: 58.33333%; | |
} | |
.row .col.push-s7 { | |
left: 58.33333%; | |
} | |
.row .col.offset-s8 { | |
margin-left: 66.66667%; | |
} | |
.row .col.pull-s8 { | |
right: 66.66667%; | |
} | |
.row .col.push-s8 { | |
left: 66.66667%; | |
} | |
.row .col.offset-s9 { | |
margin-left: 75%; | |
} | |
.row .col.pull-s9 { | |
right: 75%; | |
} | |
.row .col.push-s9 { | |
left: 75%; | |
} | |
.row .col.offset-s10 { | |
margin-left: 83.33333%; | |
} | |
.row .col.pull-s10 { | |
right: 83.33333%; | |
} | |
.row .col.push-s10 { | |
left: 83.33333%; | |
} | |
.row .col.offset-s11 { | |
margin-left: 91.66667%; | |
} | |
.row .col.pull-s11 { | |
right: 91.66667%; | |
} | |
.row .col.push-s11 { | |
left: 91.66667%; | |
} | |
.row .col.offset-s12 { | |
margin-left: 100%; | |
} | |
.row .col.pull-s12 { | |
right: 100%; | |
} | |
.row .col.push-s12 { | |
left: 100%; | |
} | |
@media only screen and (min-width: 601px) { | |
.row .col.m1 { | |
width: 8.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m2 { | |
width: 16.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m3 { | |
width: 25%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m4 { | |
width: 33.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m5 { | |
width: 41.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m6 { | |
width: 50%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m7 { | |
width: 58.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m8 { | |
width: 66.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m9 { | |
width: 75%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m10 { | |
width: 83.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m11 { | |
width: 91.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.m12 { | |
width: 100%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.offset-m1 { | |
margin-left: 8.33333%; | |
} | |
.row .col.pull-m1 { | |
right: 8.33333%; | |
} | |
.row .col.push-m1 { | |
left: 8.33333%; | |
} | |
.row .col.offset-m2 { | |
margin-left: 16.66667%; | |
} | |
.row .col.pull-m2 { | |
right: 16.66667%; | |
} | |
.row .col.push-m2 { | |
left: 16.66667%; | |
} | |
.row .col.offset-m3 { | |
margin-left: 25%; | |
} | |
.row .col.pull-m3 { | |
right: 25%; | |
} | |
.row .col.push-m3 { | |
left: 25%; | |
} | |
.row .col.offset-m4 { | |
margin-left: 33.33333%; | |
} | |
.row .col.pull-m4 { | |
right: 33.33333%; | |
} | |
.row .col.push-m4 { | |
left: 33.33333%; | |
} | |
.row .col.offset-m5 { | |
margin-left: 41.66667%; | |
} | |
.row .col.pull-m5 { | |
right: 41.66667%; | |
} | |
.row .col.push-m5 { | |
left: 41.66667%; | |
} | |
.row .col.offset-m6 { | |
margin-left: 50%; | |
} | |
.row .col.pull-m6 { | |
right: 50%; | |
} | |
.row .col.push-m6 { | |
left: 50%; | |
} | |
.row .col.offset-m7 { | |
margin-left: 58.33333%; | |
} | |
.row .col.pull-m7 { | |
right: 58.33333%; | |
} | |
.row .col.push-m7 { | |
left: 58.33333%; | |
} | |
.row .col.offset-m8 { | |
margin-left: 66.66667%; | |
} | |
.row .col.pull-m8 { | |
right: 66.66667%; | |
} | |
.row .col.push-m8 { | |
left: 66.66667%; | |
} | |
.row .col.offset-m9 { | |
margin-left: 75%; | |
} | |
.row .col.pull-m9 { | |
right: 75%; | |
} | |
.row .col.push-m9 { | |
left: 75%; | |
} | |
.row .col.offset-m10 { | |
margin-left: 83.33333%; | |
} | |
.row .col.pull-m10 { | |
right: 83.33333%; | |
} | |
.row .col.push-m10 { | |
left: 83.33333%; | |
} | |
.row .col.offset-m11 { | |
margin-left: 91.66667%; | |
} | |
.row .col.pull-m11 { | |
right: 91.66667%; | |
} | |
.row .col.push-m11 { | |
left: 91.66667%; | |
} | |
.row .col.offset-m12 { | |
margin-left: 100%; | |
} | |
.row .col.pull-m12 { | |
right: 100%; | |
} | |
.row .col.push-m12 { | |
left: 100%; | |
} | |
} | |
@media only screen and (min-width: 993px) { | |
.row .col.l1 { | |
width: 8.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l2 { | |
width: 16.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l3 { | |
width: 25%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l4 { | |
width: 33.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l5 { | |
width: 41.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l6 { | |
width: 50%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l7 { | |
width: 58.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l8 { | |
width: 66.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l9 { | |
width: 75%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l10 { | |
width: 83.33333%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l11 { | |
width: 91.66667%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.l12 { | |
width: 100%; | |
margin-left: auto; | |
left: auto; | |
right: auto; | |
} | |
.row .col.offset-l1 { | |
margin-left: 8.33333%; | |
} | |
.row .col.pull-l1 { | |
right: 8.33333%; | |
} | |
.row .col.push-l1 { | |
left: 8.33333%; | |
} | |
.row .col.offset-l2 { | |
margin-left: 16.66667%; | |
} | |
.row .col.pull-l2 { | |
right: 16.66667%; | |
} | |
.row .col.push-l2 { | |
left: 16.66667%; | |
} | |
.row .col.offset-l3 { | |
margin-left: 25%; | |
} | |
.row .col.pull-l3 { | |
right: 25%; | |
} | |
.row .col.push-l3 { | |
left: 25%; | |
} | |
.row .col.offset-l4 { | |
margin-left: 33.33333%; | |
} | |
.row .col.pull-l4 { | |
right: 33.33333%; | |
} | |
.row .col.push-l4 { | |
left: 33.33333%; | |
} | |
.row .col.offset-l5 { | |
margin-left: 41.66667%; | |
} | |
.row .col.pull-l5 { | |
right: 41.66667%; | |
} | |
.row .col.push-l5 { | |
left: 41.66667%; | |
} | |
.row .col.offset-l6 { | |
margin-left: 50%; | |
} | |
.row .col.pull-l6 { | |
right: 50%; | |
} | |
.row .col.push-l6 { | |
left: 50%; | |
} | |
.row .col.offset-l7 { | |
margin-left: 58.33333%; | |
} | |
.row .col.pull-l7 { | |
right: 58.33333%; | |
} | |
.row .col.push-l7 { | |
left: 58.33333%; | |
} | |
.row .col.offset-l8 { | |
margin-left: 66.66667%; | |
} | |
.row .col.pull-l8 { | |
right: 66.66667%; | |
} | |
.row .col.push-l8 { | |
left: 66.66667%; | |
} | |
.row .col.offset-l9 { | |
margin-left: 75%; | |
} | |
.row .col.pull-l9 { | |
right: 75%; | |
} | |
.row .col.push-l9 { | |
left: 75%; | |
} | |
.row .col.offset-l10 { | |
margin-left: 83.33333%; | |
} | |
.row .col.pull-l10 { | |
right: 83.33333%; | |
} | |
.row .col.push-l10 { | |
left: 83.33333%; | |
} | |
.row .col.offset-l11 { | |
margin-left: 91.66667%; | |
} | |
.row .col.pull-l11 { | |
right: 91.66667%; | |
} | |
.row .col.push-l11 { | |
left: 91.66667%; | |
} | |
.row .col.offset-l12 { | |
margin-left: 100%; | |
} | |
.row .col.pull-l12 { | |
right: 100%; | |
} | |
.row .col.push-l12 { | |
left: 100%; | |
} | |
} | |
/* Base Styles | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
/* NOTE | |
html is set to 62.5% so that all the REM measurements throughout Skeleton | |
are based on 10px sizing. So basically 1.5rem = 15px :) */ | |
html { | |
font-size: 62.5%; | |
} | |
body { | |
font-size: 1.5em; | |
/* currently ems cause chrome bug misinterpreting rems on body element */ | |
line-height: 1.6; | |
font-weight: 400; | |
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
color: #222; | |
} | |
/* Typography | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
h1, h2, h3, h4, h5, h6 { | |
margin-top: 0; | |
margin-bottom: 2rem; | |
font-weight: 300; | |
} | |
h1 { | |
font-size: 4.0rem; | |
line-height: 1.2; | |
letter-spacing: -.1rem; | |
} | |
h2 { | |
font-size: 3.6rem; | |
line-height: 1.25; | |
letter-spacing: -.1rem; | |
} | |
h3 { | |
font-size: 3.0rem; | |
line-height: 1.3; | |
letter-spacing: -.1rem; | |
} | |
h4 { | |
font-size: 2.4rem; | |
line-height: 1.35; | |
letter-spacing: -.08rem; | |
} | |
h5 { | |
font-size: 1.8rem; | |
line-height: 1.5; | |
letter-spacing: -.05rem; | |
} | |
h6 { | |
font-size: 1.5rem; | |
line-height: 1.6; | |
letter-spacing: 0; | |
} | |
/* Larger than phablet */ | |
@media (min-width: 550px) { | |
h1 { | |
font-size: 5.0rem; | |
} | |
h2 { | |
font-size: 4.2rem; | |
} | |
h3 { | |
font-size: 3.6rem; | |
} | |
h4 { | |
font-size: 3.0rem; | |
} | |
h5 { | |
font-size: 2.4rem; | |
} | |
h6 { | |
font-size: 1.5rem; | |
} | |
} | |
p { | |
margin-top: 0; | |
} | |
/* Links | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
a { | |
color: #1EAEDB; | |
} | |
a:hover { | |
color: #0FA0CE; | |
} | |
/* Buttons | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
.button, | |
button, | |
input[type="submit"], | |
input[type="reset"], | |
input[type="button"] { | |
display: inline-block; | |
height: 38px; | |
padding: 0 30px; | |
color: #555; | |
text-align: center; | |
font-size: 11px; | |
font-weight: 600; | |
line-height: 38px; | |
letter-spacing: .1rem; | |
text-transform: uppercase; | |
text-decoration: none; | |
white-space: nowrap; | |
background-color: transparent; | |
border-radius: 4px; | |
border: 1px solid #bbb; | |
cursor: pointer; | |
box-sizing: border-box; | |
} | |
.button:hover, | |
button:hover, | |
input[type="submit"]:hover, | |
input[type="reset"]:hover, | |
input[type="button"]:hover, | |
.button:focus, | |
button:focus, | |
input[type="submit"]:focus, | |
input[type="reset"]:focus, | |
input[type="button"]:focus { | |
color: #333; | |
border-color: #888; | |
outline: 0; | |
} | |
.button.button-primary, | |
button.button-primary, | |
input[type="submit"].button-primary, | |
input[type="reset"].button-primary, | |
input[type="button"].button-primary { | |
color: #FFF; | |
background-color: #33C3F0; | |
border-color: #33C3F0; | |
} | |
.button.button-primary:hover, | |
button.button-primary:hover, | |
input[type="submit"].button-primary:hover, | |
input[type="reset"].button-primary:hover, | |
input[type="button"].button-primary:hover, | |
.button.button-primary:focus, | |
button.button-primary:focus, | |
input[type="submit"].button-primary:focus, | |
input[type="reset"].button-primary:focus, | |
input[type="button"].button-primary:focus { | |
color: #FFF; | |
background-color: #1EAEDB; | |
border-color: #1EAEDB; | |
} | |
/* Forms | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
input[type="email"], | |
input[type="number"], | |
input[type="search"], | |
input[type="text"], | |
input[type="tel"], | |
input[type="url"], | |
input[type="password"], | |
textarea, | |
select { | |
height: 38px; | |
padding: 6px 10px; | |
/* The 6px vertically centers text on FF, ignored by Webkit */ | |
background-color: #fff; | |
border: 1px solid #D1D1D1; | |
border-radius: 4px; | |
box-shadow: none; | |
box-sizing: border-box; | |
} | |
/* Removes awkward default styles on some inputs for iOS */ | |
input[type="email"], | |
input[type="number"], | |
input[type="search"], | |
input[type="text"], | |
input[type="tel"], | |
input[type="url"], | |
input[type="password"], | |
textarea { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
textarea { | |
min-height: 65px; | |
padding-top: 6px; | |
padding-bottom: 6px; | |
} | |
input[type="email"]:focus, | |
input[type="number"]:focus, | |
input[type="search"]:focus, | |
input[type="text"]:focus, | |
input[type="tel"]:focus, | |
input[type="url"]:focus, | |
input[type="password"]:focus, | |
textarea:focus, | |
select:focus { | |
border: 1px solid #33C3F0; | |
outline: 0; | |
} | |
label, | |
legend { | |
display: block; | |
margin-bottom: .5rem; | |
font-weight: 600; | |
} | |
fieldset { | |
padding: 0; | |
border-width: 0; | |
} | |
input[type="checkbox"], | |
input[type="radio"] { | |
display: inline; | |
} | |
label > .label-body { | |
display: inline-block; | |
margin-left: .5rem; | |
font-weight: normal; | |
} | |
/* Lists | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
ul { | |
list-style: circle inside; | |
} | |
ol { | |
list-style: decimal inside; | |
} | |
ol, ul { | |
padding-left: 0; | |
margin-top: 0; | |
} | |
ul ul, | |
ul ol, | |
ol ol, | |
ol ul { | |
margin: 1.5rem 0 1.5rem 3rem; | |
font-size: 90%; | |
} | |
li { | |
margin-bottom: 1rem; | |
} | |
/* Code | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
code { | |
padding: .2rem .5rem; | |
margin: 0 .2rem; | |
font-size: 90%; | |
white-space: nowrap; | |
background: #F1F1F1; | |
border: 1px solid #E1E1E1; | |
border-radius: 4px; | |
} | |
pre > code { | |
display: block; | |
padding: 1rem 1.5rem; | |
white-space: pre; | |
} | |
/* Tables | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
th, | |
td { | |
padding: 12px 15px; | |
text-align: left; | |
border-bottom: 1px solid #E1E1E1; | |
} | |
th:first-child, | |
td:first-child { | |
padding-left: 0; | |
} | |
th:last-child, | |
td:last-child { | |
padding-right: 0; | |
} | |
/* Spacing | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
button, | |
.button { | |
margin-bottom: 1rem; | |
} | |
input, | |
textarea, | |
select, | |
fieldset { | |
margin-bottom: 1.5rem; | |
} | |
pre, | |
blockquote, | |
dl, | |
figure, | |
table, | |
p, | |
ul, | |
ol, | |
form { | |
margin-bottom: 2.5rem; | |
} | |
/* Utilities | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
.u-full-width { | |
width: 100%; | |
box-sizing: border-box; | |
} | |
.u-max-full-width { | |
max-width: 100%; | |
box-sizing: border-box; | |
} | |
.u-pull-right { | |
float: right; | |
} | |
.u-pull-left { | |
float: left; | |
} | |
/* Misc | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
hr { | |
margin-top: 3rem; | |
margin-bottom: 3.5rem; | |
border-width: 0; | |
border-top: 1px solid #E1E1E1; | |
} | |
/* Clearing | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
/* Self Clearing Goodness */ | |
.container:after, | |
.row:after, | |
.u-cf { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
/* Media Queries | |
–––––––––––––––––––––––––––––––––––––––––––––––––– */ | |
/* | |
Note: The best way to structure the use of media queries is to create the queries | |
near the relevant code. For example, if you wanted to change the styles for buttons | |
on small devices, paste the mobile query code up in the buttons section and style it | |
there. | |
*/ | |
/* Larger than mobile */ | |
/* Larger than phablet (also point when grid becomes active) */ | |
/* Larger than tablet */ | |
/* Larger than desktop */ | |
/* Larger than Desktop HD */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width: 601px){.container{width:85%}}@media only screen and (min-width: 993px){.container{width:70%}}.container .row{margin-left:-0.75rem;margin-right:-0.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 0.75rem}.row .col[class*="push-"],.row .col[class*="pull-"]{position:relative}.row .col.s1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.33333%}.row .col.pull-s1{right:8.33333%}.row .col.push-s1{left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.pull-s2{right:16.66667%}.row .col.push-s2{left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.pull-s4{right:33.33333%}.row .col.push-s4{left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.pull-s5{right:41.66667%}.row .col.push-s5{left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.pull-s7{right:58.33333%}.row .col.push-s7{left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.pull-s8{right:66.66667%}.row .col.push-s8{left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.pull-s10{right:83.33333%}.row .col.push-s10{left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.pull-s11{right:91.66667%}.row .col.push-s11{left:91.66667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width: 601px){.row .col.m1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.33333%}.row .col.pull-m1{right:8.33333%}.row .col.push-m1{left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.pull-m2{right:16.66667%}.row .col.push-m2{left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.pull-m4{right:33.33333%}.row .col.push-m4{left:33.33333%}.row .col.offset-m5{margin-left:41.66667%}.row .col.pull-m5{right:41.66667%}.row .col.push-m5{left:41.66667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.33333%}.row .col.pull-m7{right:58.33333%}.row .col.push-m7{left:58.33333%}.row .col.offset-m8{margin-left:66.66667%}.row .col.pull-m8{right:66.66667%}.row .col.push-m8{left:66.66667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.33333%}.row .col.pull-m10{right:83.33333%}.row .col.push-m10{left:83.33333%}.row .col.offset-m11{margin-left:91.66667%}.row .col.pull-m11{right:91.66667%}.row .col.push-m11{left:91.66667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width: 993px){.row .col.l1{width:8.33333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.66667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.33333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.66667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.33333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.66667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.33333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.66667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.33333%}.row .col.pull-l1{right:8.33333%}.row .col.push-l1{left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.pull-l2{right:16.66667%}.row .col.push-l2{left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.pull-l4{right:33.33333%}.row .col.push-l4{left:33.33333%}.row .col.offset-l5{margin-left:41.66667%}.row .col.pull-l5{right:41.66667%}.row .col.push-l5{left:41.66667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.33333%}.row .col.pull-l7{right:58.33333%}.row .col.push-l7{left:58.33333%}.row .col.offset-l8{margin-left:66.66667%}.row .col.pull-l8{right:66.66667%}.row .col.push-l8{left:66.66667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.33333%}.row .col.pull-l10{right:83.33333%}.row .col.push-l10{left:83.33333%}.row .col.offset-l11{margin-left:91.66667%}.row .col.pull-l11{right:91.66667%}.row .col.push-l11{left:91.66667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width: 550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type="checkbox"],input[type="radio"]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:normal}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}button,.button{margin-bottom:1rem}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment