* {
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
}

body {
  font-family      : 'Open Sans', sans-serif;
  font-size        : 16px;
  background-color : #eee;
  color            : #292f2f;
}

a {
  text-decoration : none;
  color           : #008499;
}

a:hover {
  color : #3baec4;
}

.pl {
  float : left;
}

.pr {
  float : right;
}

.mb {
  margin-bottom : 2em;
}

.nmb {
  margin-bottom : 0;
}

.nmt {
  margin-top : 0;
}

/* General */
nav {
  position      : fixed;
  top           : 0;
  left          : 0;
  right         : 0;
  width         : 100vw;
  height        : 50px;
  background    : #3d9b5d;
  border-bottom : 1px solid #75c57e;
  font-size     : 2em;
  color         : #eee;
  text-wrap     : nowrap;
  padding-left  : .5em;
}

div.tagline {
  width           : 100vw;
  padding-top     : 70px;
  padding-bottom  : 70px;
  min-height      : 70vh;
  background      : #5bad6d;
  background      : linear-gradient(to bottom right, #75c57e, #00834a);
  box-shadow      : 0px 3px 4px rgba(0, 0, 0, .1);
  display         : flex;
  align-items     : center;
  justify-content : space-around;
  flex-wrap       : nowrap;
}

div.tagline div {
  display         : flex;
  align-items     : center;
  justify-content : space-around;
  flex-wrap       : wrap;
  max-width       : 1300px;
  min-height      : 40vh;
}

div.tagline div span {
  text-align : center;
  color      : #eee;
  width      : 100%;
  margin     : 0;
  padding    : 0;
  font-size  : 6em;
}

@media all and (max-width : 500px) {
  div.tagline div span {
    font-size : 2em;
  }
}

div.tagline div a {
  padding : 2px;
}

div.content {
  max-width    : 800px;
  padding      : 1em;
  text-align   : justify;
  margin-right : auto;
  margin-left  : auto;
}

div.content p {
  margin-top : .5em;
}

div.content blockquote {
  padding-left  : 1em;
  border-left   : 4px solid #75c57e;
  margin-top    : .5em;
  margin-bottom : .5em;
}

div.content h1 {
  text-align : center;
  margin-top : .5em;
}

div.communities {
  display         : flex;
  align-items     : flex-start;
  justify-content : center;
  flex-wrap       : wrap;
  max-width       : 400px;
  margin-left     : auto;
  margin-right    : auto;
}

div.community {
  min-width      : 50%;
  padding        : .5em;
  vertical-align : middle;
}

@media all and (max-width: 400px) {
  div.community {
    width : 100%;
  }
}

div.community:nth-child(odd) {
  direction : rtl;
}

div.community.lg {
  width      : 100%;
  text-align : center;
}

div.community div.img {
  border-radius : 50%;
  height        : 50px;
  width         : 50px;
  background    : #ddd;
  float         : left;
  margin-right  : 10px;
}

div.community:nth-child(odd) div.img {
  float : right;
}

div.community.lg div.img {
  height       : 100px;
  width        : 100px;
  display      : block;
  margin-left  : auto;
  margin-right : auto;
  float        : none;
}

div.community.lg div.img img {
  width         : 100px;
  height        : 100px;
  border-radius : 50%;
}

div.community div.img img {
  width         : 50px;
  height        : 50px;
  border-radius : 50%;
}

div.community:nth-child(even) div.description {
  margin-left : 60px;
}

div.community:nth-child(odd) div.description {
  margin-right : 70px;
}

div.community div.description span.links a {
  margin-left : 10px;
}

footer {
  font-size     : 0.3em;
  width         : 100vw;
  text-align    : center;
  margin-top    : 3em;
  margin-bottom : 3em;
}