/* Typography */

body {
   font-size: 1em;
   line-height: 1.5em;
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
   color: #444;
   padding:0;
   margin:0;
   border-top: 2px solid #FFF;
}

p {
   font-size: 1.25em;
   line-height: 1.6em;
   margin: 0 0 1.6em 0;
   font-style: normal;
}

h1 {
   font-size: 2.5em;
   line-height: 1.095em;
   margin: 0.762em 0 0.2em;
   font-weight: 400;
   font-style: normal;
}

h2 {
   font-size: 2em;
   line-height: 1.188em;
   margin: 1em 0 0.7em 0;
   font-weight: 400;
   font-style: normal;
}

h3 {
   font-size: 1.625em;
   line-height: 1.231em;
   margin: 2em 0 1.5em 0;
   font-weight: 400;
   font-style: normal;
}

h4 {
   font-size: 1.2em;
   line-height: 1.4em;
   margin: 0.5em 0 0 0;
   font-weight: 400;
   font-style: normal;
}

a h4:hover {
  text-decoration: underline;
}


ul {
   font-size: 1.25em;
   line-height: 1.6em;
   margin: 0 0 1em 0;
   padding: 0 0 0 2em;
   list-style: disc outside;
}

ul ul {
  font-size: 1em;
}

ol {
   font-size: 1.25em;
   line-height: 1.6em;
   margin: 0 0 1.6em 0.5em;
}

blockquote {
   margin: 3em 0 3em 4em;
}

p.quote {
   line-height: 1.7;
   font-weight: 400;
   font-style: normal;
}

blockquote.pquote {
   text-align: center;
   margin: 3em -100px;
}

p.pquote {
   font-size: 1.625em;
   line-height: 1.667em;
}

a {
   color: #25aae1;
   text-decoration: none;
   outline: 0;
   cursor: pointer;
}

a:visited {
   text-decoration: none;
   outline: 0;
}

a:hover, a.button:hover{
   color:#f47e3c;
}

a:active {
   border-bottom: none;
}

a:focus {
   border-bottom: none;
}

em {
   font-style: italic;
   font-weight: 400;
   color:#888;
}

strong {
   font-weight: 700;
}

small {
   font-size: 75%;
}

sub {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
}

sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
   top: -0.5em;
}

a.a-sup {
   border: none;
}

p.header {
   font-size: 0.875em;
   line-height: 1em;
   margin: 0;
}

span.author {
   text-transform: uppercase;
   font-weight: 400;
   font-style: normal;
}

h2.header {
   font-size: 1.1em;
   line-height: 1.6em;
   border-top: 1px solid #444;
   padding-top: 0.8em;
   margin: 0;
   font-weight: 400;
   font-style: normal;
}

p.first-paragraph {
   font-size: 1.625em;
   line-height: 1.462em;
   margin: 2.462em 0 1.846em 0;
   font-weight: 400;
   font-style: normal;
}

span.first-letter {
   display: inline-block;
   float: left;
   font-size: 4.385em;
   line-height: 1em;
   margin: 0 0.1em 0 0;
   width: 0px;
}

ol.footnote-list {
   font-size: 1.125em;
   line-height: 1.778em;
   margin: 0 0 1.778em 0;
}

ul.comment-list p {
   font-size: 1.125em;
   line-height: 1.778em;
   margin: 0 0 1.778em 0;
}

p.comment-options {
   font-size: 1.25em;
   line-height: 1.6em;
   margin: 0 0 2.4em 0;
}

ul.comment-list {
   list-style: none;
   font-size: 1em;
   line-height: 1em;
   margin: 0 0 8em 0;
}

img {
   width: auto;
   max-width: 100%;
   vertical-align: top;
   height: auto;
   margin: 0;
}

article {
   width: 960px;
   margin: 0 auto;
}

span.hr {
   display: block;
   width: 14%;
   margin: 4em auto;
   border: 0;
   border-top: 1px solid #444;
   text-indent: -9999em;
   height: 1px;
}

div.figure {
   margin: 3em 0;
}

p.caption {
   text-align: center;
   font-size: 0.875em;
   line-height: 1em;
   margin-top: 1.143em;
   color: #ccc;
   margin-bottom: 0;
}

span.heading-small {
   font-weight: 400;
   font-size: 0.538em;
   margin-left: 0.5em;
   font-style: normal;
}

span {
   font-weight: 400;
   font-style: normal;
}

li {
   font-style: normal;
}

br {
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: #515657;
    font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    /*color: #34495e;*/
    color:#000;
    font-family:'Fira Sans',Arial,"Lucida Grande",sans-serif;
    font-weight:300;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/* Layout Styles */
.l-box {
    padding: 1em;
}

.l-box-lg {
    /*border-bottom: 1px solid rgba(0,0,0,0.1);*/
    padding: 1.5em;
    /*text-align: center;*/
}

.callout {
  font-size: 1.5em;
  line-height: 1.8em;
  background: #EFEFEF;
  /*color:#000;*/
  padding: 50px 0;
}

.circle-box {
  padding:0 3em;
}

.is-center {
    text-align: center;
}

/* Form Styles */

.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/* Button Styles */
.pure-button {
    background-color: #c9e3f6;
    color: black;
    padding: 0.5em 2em;
    border-radius: 0;
    margin: 0 1em 1em 0;
}

.pure-button:hover {
  background:#c9e3f6;
}

.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 3px;
    font-size: 120%;
}

.pure-button.pure-button-lg {
  font-size: 1.4em;
}


/* Header Menu */
.menu-wrapper {
    box-shadow: 0 4px 2px -2px rgba(128,128,128,0.5);
    z-index:5;
    position:relative;
    text-align: center;
    min-height: 72px;
    width:100%;
    background: rgba(201, 227, 246, 1);
    border:none;
    overflow:hidden;
}

.pure-menu #menu-button {
  display:inline-block;
  border:1px solid #AAA;
  padding:10px;
  margin:15px 10px 15px 0;
  background:#EEE;
  border-radius: 0;
  line-height: 1em;
}

.pure-menu.pure-menu-open.pure-menu-horizontal {
    width:80%;
    max-width:1170px;
    margin: 0 auto;
    border:none;
}

.pure-menu-horizontal a {
  color: #555;
  font-size: 13px;
}

a:hover {
  color: #f47e3c;
}

.pure-menu.pure-menu-horizontal ul {
  margin:20px 0;
}

/* small screens menu */
.pure-menu.pure-menu-horizontal ul {
  display:none;
  width:100%;
  margin:0;
}

.pure-menu.pure-menu-horizontal ul li {
  display:block;
  width:100%;
  border-top:1px solid #AAA;
}

.pure-menu.pure-menu-horizontal ul.display {
  display:block;
}
/* end small screens menu */


.pure-menu-horizontal a {
  border-radius: 3px;
}

.pure-menu li a {
  padding: 5px 15px;
  background: none;
}

.pure-menu li a:hover {
  background:none;
}

/*.pure-menu-horizontal .pure-menu-selected a {
  border:1px solid #8ACEFF;
}*/

/* Footer Styles */

.page-wrapper {
  width: 80%;
  max-width:1170px;
  margin: 0 auto;
}

.push {
  height: auto;
}

footer {
  color: #FFF;
  background:#D9615B;
  margin: 150px 0 0;
  border-top:12px solid #c9e3f6;
  position:relative;
}

footer .footer-design {
  width:200px;
  position: absolute;
  bottom: 100%;
  left:20px;
  margin-bottom: -20px;
}

footer p {
  color: #CCC;
}

footer .footer-main {
  padding-top: 50px;
}

footer .footer-main div {
  padding-top: 20px;
}

footer .social-icons {
  color: #55ACEE;
}

.email input {
  padding: 0.5em;
  border:none;
  margin:0;
  color: #666;
}

.email .pure-button {
  padding: 0.5em 1em 0.6em;
  margin:0 0.5em;
  border: none;
  font-size:1em;
  line-height:1em;
}

footer .email .pure-button {
  background: #c9e3f6;
  color:#D9615B;
}

footer ul {
  padding:1em 0;
  margin:0;
  list-style:none;
  font-size:1em;
}

footer ul a, footer ul a:visited {
  color:white;
}

footer ul.footer-links {
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  flex-wrap:wrap;
  width:100%;
}
footer ul.footer-links li {
  width:auto;
}
footer ul.footer-links li.spacer {
  border-right:1px solid #F7C4A6;
  width:0;
}
footer ul.footer-links li:last-child {
  border:none;
}
footer ul.footer-links li a {
  text-transform: uppercase;
  color: #FFF;
  font-size:0.8em;
}

footer ul a:hover, footer ul.footer-links li a:hover, footer ul a:visited:hover {
  color:f47e3c;
  text-decoration:none;
}

footer h3 {
  margin: 1em 0;
}

::-webkit-input-placeholder {
   font-style: italic;
}

:-moz-placeholder { /* Firefox 18- */
   font-style: italic;
}

::-moz-placeholder {  /* Firefox 19+ */
   font-style: italic;
}

:-ms-input-placeholder {
   font-style: italic;
}

/* Header + Header Menu */

.splash {
    text-align: center;
    clear:both;
    margin:0;
    padding:1.5rem 0;
}

.splash.no-image {
  padding-bottom: 0;
}

.splash p {
  font-size:1.6em;
}

.header-img {
  background: #C9E3F6; /*#E3F4FF;*/
  min-height: 12rem;
  margin: 0;
  margin-bottom: 1.5rem;
}

#fellow-header {
  background-image:url(/img/fellows.jpg);
  opacity:0.8;
}

#about-header {
  background-image:url(/img/about.jpg);
  opacity:0.8;
}

#home-banner .bg {
  padding:4rem 0 8rem;
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.84) 14%, rgba(255,255,255,0.54) 26%, rgba(255,255,255,0.4) 42%, rgba(255,255,255,0.1) 61%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(14%,rgba(255,255,255,0.84)), color-stop(26%,rgba(255,255,255,0.54)), color-stop(42%,rgba(255,255,255,0.4)), color-stop(61%,rgba(255,255,255,0.1)), color-stop(70%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 14%,rgba(255,255,255,0.54) 26%,rgba(255,255,255,0.4) 42%,rgba(255,255,255,0.1) 61%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 14%,rgba(255,255,255,0.54) 26%,rgba(255,255,255,0.4) 42%,rgba(255,255,255,0.1) 61%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 14%,rgba(255,255,255,0.54) 26%,rgba(255,255,255,0.4) 42%,rgba(255,255,255,0.1) 61%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* IE10+ */
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0.84) 14%,rgba(255,255,255,0.54) 26%,rgba(255,255,255,0.4) 42%,rgba(255,255,255,0.1) 61%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#home-banner {
  background: url("/img/helix.jpg") no-repeat;
  background-size: cover;
  background-position: center top;
  position:relative;
  min-height: 200px;
  margin: 0;
}

.splash h1, .bg h1 {
  font-size: 4em;
  margin-bottom:0.4rem;
}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
    margin-top: 0;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    /*
    background: #2d3e50;
    color: #aaa;
    */
    background: #16a085;
    color: #222;
}

/* Bill wanted a three-color layout, here's a different ribbon */
.ribbon-alt {
    /*
    background: #34495e;
    color: #aaa;
    */
    background: #1abc9c;
    color: #222;
}

/* Content Pages */

.project textarea {
  width: 100%;
  min-height: 7em;
}


div#registrationDetails{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.3s, max-height 0.3s ease;
  -moz-transition: opacity 0.3s, max-height 0.3s ease;
  -ms-transition: opacity 0.3s, max-height 0.3s ease;
  -o-transition: opacity 0.3s, max-height 0.3s ease;
  transition: opacity 0.3s, max-height 0.3s ease;
}

p#passError, p#disciplineError, p#languageError, p#affiliationError{
  display:none;
}

.error{
  padding: 0.5em;
  background-color: #FF9999;
  color: #000000;
  padding: 0.5em;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.ui-hidden{
  display: none;
}
.block-link {
  float: left;
  margin-bottom: 1em;
  clear: both;
}

i.bigIcon{
  color: #FFFFFF;
  font-size: 1000%
}

#legal {
  font-size:0.9em;
}

/* Form Customizations */

.pure-form input[type="checkbox"], .pure-form input[type="radio"] {
  width: auto;
  float: right;
}

.pure-form label span {
  font-weight: bold;
  font-size: 100%;
}
#github-select {
  font-size: 1.2em;
}
#github-select select option{
  padding:0.5em;
  color:#000;
}

/* pilot study styles */

.fade {
  color: #888;
}

.text-success {
  color: #61BA9E;
}
.text-danger {
  color: #ee5f5b;
}
.text-warning {
  color:#BAB961;
}

.btn-success {
  background: #62c462;
}
.btn-success:hover {
  background: #51a351;
}
.btn-danger {
  background: #ee5f5b;
}

.btn-danger:hover {
  background: #bd362f;
}

.content-contrast {
  background-color: #c9e3f6;
}

.MSLlogo{
  height: 36px;
  margin:11px 15px 0 0;
}

/* weird pure css alignment stuff */
#logo {
  padding:0;
  margin:0;
  display:inline;
}

/* pilot study project page styles */
.subhead {
  font-style: italic;
  padding-bottom: 1.5rem;
  display: block;
  font-size:1.3em;
}

.project {
  margin: 2em 0 1em;
}

.project i {
  /*font-size:1.5em;*/
  margin-right:0.4em;
}

.project .mozfest-tracks  {
  text-align: center;
  background: #EEE;
  padding:2em 1em;
}

.project .crop {
  width:100%;
  overflow:hidden;
  border:1px solid #999;
  margin-top:0.4em;
}

.project a .crop {
  max-height:12em;
}

section.project {
  padding-top:20px;
}

section.project label {
  font-size:1.3em;
}

.project .sidebar {
  padding-right:1.5em;
  padding-bottom: 1em;
}

.project .project-links {
  float:right;
}

.project-links .pure-button {
  margin-left: 10px;
}

.project-links a.pure-button:hover {
  background-color: #3574A1;
  color:white;
}

.project-links a.pure-button {
  background-color: #c9e3f6;
  color:black;
}

span.tag {
  font-weight: bold;
}

section.project .contributor {
  padding: 0 3px 3px 0;
}

.project .contributor img {
  border-radius: 3px;
}

.project .contributor.local img {
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
  opacity: 0.5;
}

section.project ul.repo {
  list-style: none;
  border: 1px solid black;
  font-size: 1em;
  padding: 0;
}

.project .repo-info{
  float:right;
}

.project .repo-info i {
  font-size: 1em;
  margin-left:1em;
}

.project .repo-info>div {
  float:right;
}

section.project ul.repo li {
  padding: 1em;
  border-bottom: 1px solid #999;
}

section.project ul.repo li:last-child {
  border:none;
}

section.project h1 {
  margin-top:0;
}

section.project ul {
  margin:0;
}

section.project ul ul {
  font-size: 1em;
}

section.project textarea, section.project input {
  padding:0.5em;
}

div.project h3 {
  margin:0;
  padding:0;
  font-size:1.2em;
  font-weight:bold;
}

.project p {
  padding-bottom:0;
  margin-bottom:0.8em;
}

.projects {
  margin-top:4em;
}

ul.infolink {
  list-style: none;
  padding:0;
}




/* Tooltips */
a.tooltips {
  position: relative;
}
a.tooltips span {
  position: absolute;
  padding:0 5px;
  color: #FFFFFF;
  background: #000000;
  text-align: center;
  visibility: hidden;
  border-radius: 5px;
  font-size:8pt;
}
a.tooltips span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  width: 0; height: 0;
  border-bottom: 5px solid #000000;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}
a:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  top: 100%;
  left: 0;
  z-index: 999;
}

div.connect ul {
  list-style: none;
  padding:0;
  margin:0;
}

div.circle-img {
  height:100px;
  width:100%;
  margin-top: 40px;
  background: transparent no-repeat center top / auto 100px;
}

.modal-body div.circle-img {
  margin-top:10px;
}

#circle-exp {
  background-image: url("/img/experiment.svg");
}

#circle-innovate {
  background-image: url("/img/lightbulb.svg");
}

#circle-collab {
  background-image: url("/img/participate.svg");
}

#community-banner {
  background: url("/img/community.jpg") no-repeat;
  background-size: cover;
  background-position: center bottom;
}

#learn-img {
  background-image: url("/img/learn.svg");
}

#teach-img {
  background-image: url("/img/teach.svg");
  background-size:auto 120px;
}

.icon-img {
  background: transparent no-repeat center top / auto 100px;
  min-height:120px;
  margin:0;
}

a.project-img {
  /*background: #E3F4FF;*/
  height:6rem;
  margin:1em 0;
}

.spaced-columns {
  padding: 1em 3em 0 1em;
}

.spaced-columns:first-child {
  padding-left: 0;
}

.spaced-columns:last-child {
  padding-right:0;
}


.pull-right {
  float:right;
}

.pull-left {
  float:left;
}

.pure-button, .pure-menu .pure-button {
  background:#D9615B;
  color:white;
  border-radius:0;
  margin:0;
}

.pure-button:hover, .pure-menu .pure-button:hover  {
  background:#7d3e27;
}

.pure-button.light {
  background:#949392;
}
.pure-button.light:hover {
  background:#707070;
}

#home-banner .pure-button {
  margin:40px 15px 0 0;
  font-size: 20px;
}

.next span {
  /*font-weight: 600;*/
  font-size:12pt;
}

.pure-menu #tabzilla {
  border:none;
  display:none;
}

/* make the chevron line up nicer... */
span.fa.fa-chevron-right {
  font-size:0.7em;
}


.post {
  padding: 40px 0;
  border-bottom:1px solid #DEDEDE;
}

.post h1 {
  font-size:2em;
  margin-bottom:10px;
}

#blog .sidebar {
  margin: 40px 0 0 20px;
  background: #C9E3F6;
  padding: 1em;
}

#blog .sidebar h3 {
  margin:0.8em 0;
}

#blog-list .post:first-child {
  padding-top:0;
}

#blog .post:first-child h1 {
  margin-top:0;
}

.edit-page input {
  width:100%;
}

.edit-page .projectLink {
  width:100%;
  margin:10px 0;
}

.edit-page .projectLink input {
  width:80%;
}

.edit-page input[type='radio'] {
  width: 20px;
}

.edit-page input[type='checkbox'] {
  width: 20px;
}
#programs {
  margin:0;
  padding:0;
}

#programs li {
  height:150px;
  background:#EFEFEF;
  border:1px solid #AAA;
}

.person-card, .person-desc {
  margin: 1em 0;
  padding:0.5em 1em 0.5em 0;
}

.person-card {
  opacity: 0.8;
}

.person-card:hover {
  opacity:1;
}

#featured-projects .person-card {
  margin:0;
  padding:0 1em 0 0;
}

.user-page ul {
  margin: 0.5em 0;
  list-style: none;
  padding:0;
}

.user-page li {
  line-height: 2em;
}

.fa-li {
  top:0.3em;
  font-size:1.1em;
}

button.close {
  float:right;
  border:none;
  padding:0;
}

.modal-footer button {
  margin: 0 10px;
}


/* Google forms */

/* For the Request a Workshop form */
#ss-form label {
   font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}

#ss-form .ss-q-title {
    display: block;
}
.ss-required-asterisk {
    color: #c43b1d;
}
#ss-form label {
    display:inline;
    cursor: default;
}
#ss-form .ss-secondary-text {
    color: #666;
    padding:0.2em 0;
}
#ss-form .ss-form-entry {
    margin-bottom: 1.5em;
}
#ss-form ul {
    margin:0;
    padding:0;
    list-style: none;
}
#ss-form ol {
    margin:0;
}
#ss-form .ss-choice-item {
    /*padding-bottom: em;*/
    font-size:0.7em;
}

#ss-form .ss-q-long {
    resize: vertical;
    width: 70%;
}
#ss-form .error-message, .required-message {
    display: none;
}
#ss-form .ss-form-entry input {
  vertical-align: middle;
  margin: 0;
  padding:0.4em 0.6em;
  font-size:1em;
}
#ss-form .ss-choice-item-control {
  padding-right: 0.3em;
}


/*
 * Media Queries
 */

 @media (min-width:35.5em) {
  .pure-menu #tabzilla  {
    display:block;
  }

  .featured-projects {
    display: flex;
    justify-content: space-between;
    position:relative;
  }

  .featured-projects:before {
      content:"\A";
      border-style: solid;
      border-width: 10px 15px 10px 0;
      border-color: transparent #c9e3f6 transparent transparent;
      position: absolute;
      left: -25px;
      top: 3rem;
      cursor:pointer;
  }

  .featured-projects:after {
      content:"\A";
      border-style: solid;
      border-width: 10px 0 10px 15px;
      border-color: transparent transparent transparent #c9e3f6;
      position: absolute;
      right: -25px;
      top: 3rem;
      cursor:pointer;
  }

  a.project-img div {
    background-size: cover;
  }
  a.project-img:first-child {
    margin-left:0;
  }
  a.project-img:last-child {
    margin-right:0;
  }
}


/* Tablet & Up Media Queries */
@media (min-width: 48em) {

  body {
    font-size: 13px;
  }

  .content {
    padding: 1em;
  }

  .pure-menu.pure-menu-horizontal ul.pull-right {
    display:block;
    margin: 20px 0;
    width: auto;
  }

  .pure-menu.pure-menu-horizontal ul.pull-right li {
    display:inline-block;
    width:auto;
    border: none;
  }

}

@media (min-width:64em) {
  .pure-menu #tabzilla  {
    display:block;
  }
  .pure-menu.pure-menu-horizontal ul.pull-left {
    display:block;
    margin: 20px 0;
    width: auto;
  }

  .pure-menu.pure-menu-horizontal ul.pull-left li {
    display:inline-block;
    width:auto;
    border: none;
  }
  .pure-menu #menu-button {
    display:none;
  }

  a.project-img {
    height:12rem;
  }

  .featured-projects:before {
      top: 6rem;
  }

  .featured-projects:after {
      top: 6rem;
  }
}

@media (max-width: 767px) {
    /* Wrap button in mobile and tablet */
    .white-space-normal-xs {
        white-space: normal !important;
    }
}