html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

html, body {
  font-family: Poppins, Helvetica, sans-serif;
  font-size: 10px;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

.articleContainer {
  width: 100%;
  max-width: 640px;
}

.articleContainer .backgroundImage {
  height: 427px;
  width: 100%;
  background-repeat: no-repeat;
  margin-top: 1.8em;
  background-size: cover;
  background-position: center;
}

.container {
  width: 100%;
  max-width: 1032px;
  margin: 0 auto;
  padding: 16px;
}

h1 {
  color: #1a1a1a;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5em;
}

h1.authorby {
  color: #1a1a1a;
  font-size: 1.8em;
  font-weight: 300;
  line-height: 1.5em;
  width: 100%;
  clear: both;
  display: block;
  margin-bottom: 1em;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 22px;
  }

  h1.authorby {
    font-size: 1.5em;
  }

  h2 {
    font-size: 70%;
  }
}

a {
  color: #1a1a1a;
}

p {
  font-weight: 300;
  margin-bottom: 1.5em;
}

.content {
  flex-direction: row;
  display: flex;
}

.template {
  font-size: 1.6em;
  line-height: 1.8em;
}

i {
  font-style: italic;
}

.content img {
  margin-bottom: 1.2em;
}

.articles {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.articles .article {
  width: 31%;
  flex-grow: 0;
  margin-bottom: 2em;
}

@media only screen and (max-width: 1023px) {
  .articleContainer {
    max-width: initial;
  }

  .content img {
    width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 768px) {
  .articles .article {
    width: 48%;
  }
}

@media only screen and (max-width: 600px) {
  .articles .article {
    width: 100%;
  }
}

.articleImage {
  height: 180px;
  width: 100%;
  background-size: cover;
  margin-bottom: 1em;
  border-radius: 4px;
}

h2 {
  margin-top: 1em;
}

h2 a, p a {
  text-decoration: underline;
}

.gallery {
  margin-top: 40px;
}

.gallery img {
  height: 80px;
  width: 80px;
  margin-right: 10px;
}

.tags a {
  margin-right: 10px;
  margin-bottom: 10px;
  background-color: #aaa;
  color: #fff;
  padding: 0 1em;
  line-height: 2em;
  font-size: .7em;
  text-transform: uppercase;
}

.logo {
  background-image: url(/icon-old-crop.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 140px;
  width: 133px;
  margin-bottom: 20px;
}

.logoHeader {
  border-bottom: 4px solid #f0e6db;
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
}

.headerBox {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.headerSocial {
  margin-top: 1em;
  margin-bottom: 1em;
  display: flex;
  justify-content: flex-end;
}

input.searchInput {
  display: inline-block;
  width: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid #000;
  border-radius: 0;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

input.searchInput.active {
  width: 15em;
  margin-left: .3em;
}

input.searchInput:focus {
  border-color: #000;
}

.headerSocial a {
  font-size: 2.5em;
  margin-left: .3em;
}

.headerSocial .search {
  color: #000;
  font-size: 2.2em;
}

.headerSocial .twitter {
  color: #1da1f2;
}

.headerSocial .facebook  {
  color: #3b5998;
}

.headerSocial .instagram  {
  color: #833ab4;
}

.headerSocial .youtube  {
  color: #ff0000;
}

.headerNav {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.commingSoon {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-bottom: 60px;
}

.headerNav a {
  margin-left: 2em;
  font-size: 1.5em;
  letter-spacing: 1.1;
  margin-bottom: 20px;
  color: #222;
  border-bottom: 1px solid #222;
  line-height: 1.3em;
}

.headerNav a:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 600px) {
  .logoHeader {
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
  }

  .headerBox {
    flex-direction: column-reverse;
    align-self: stretch;
  }

  input.searchInput, input.searchInput.active {
    flex: 1;
    margin-left: .3em;
    border-bottom: 0;
  }

  .headerNav {
    font-size: 80%;
    justify-content: center;
  }

  .headerNav a {
    margin-left: 1em;
    margin-bottom: 10px;
  }
}

@media only screen and (max-width: 320px) {
  .headerNav {
    font-size: 70%;
  }
}

.footerNav {
  position: relative;
  border-top: 4px solid #f0e6db;
  padding-top: 20px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.footerNav a {
  font-size: .7em;
  color: #222;
  letter-spacing: 1.1;
  border-bottom: 1px solid #222;
  line-height: 1.4em;
}

.footerText {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  text-align: center;
  color: #222;
  letter-spacing: .04em;
  font-size: .6em;
  line-height: 1em;
  pointer-events: none;
}

@media only screen and (max-width: 600px) {
  .footerNav {
    font-size: 90%;
  }
}

@media only screen and (max-width: 320px) {
  .footerNav {
    font-size: 80%;
  }
}

.articleSide {
  margin-left: 60px;
  flex: 1;
}

.alderman .outline {
  color: rgb(255, 255, 255);
  text-shadow: rgb(44, 38, 93) 2px 0px 0px, rgb(44, 38, 93) 1.75517px 0.958851px 0px, rgb(44, 38, 93) 1.0806px 1.68294px 0px, rgb(44, 38, 93) 0.141474px 1.99499px 0px, rgb(44, 38, 93) -0.832294px 1.81859px 0px, rgb(44, 38, 93) -1.60229px 1.19694px 0px, rgb(44, 38, 93) -1.97998px 0.28224px 0px, rgb(44, 38, 93) -1.87291px -0.701566px 0px, rgb(44, 38, 93) -1.30729px -1.5136px 0px, rgb(44, 38, 93) -0.421592px -1.95506px 0px, rgb(44, 38, 93) 0.567324px -1.91785px 0px, rgb(44, 38, 93) 1.41734px -1.41108px 0px, rgb(44, 38, 93) 1.92034px -0.558831px 0px;
}

.alderman {
  color: #2a2857;
  font-size: 2em;
  font-weight: 900;
  line-height: 1.4em;
  text-align: right;
}

.alderman .findOut {
  background-color: #76babd;
  color: #fff;
  font-weight: bold;
  border: 0;
  margin-top: 1em;
}

.bestOf {
  border-top: 4px solid #f0e6db;
  margin-top: 2em;
  padding-top: 1em;
}

.bestOf h3 {
  font-weight: bold;
  margin-bottom: 1em;
}

.bestOf a {
  margin-bottom: 1em;
  display: block;
  text-decoration: underline;
}

@media only screen and (max-width: 1023px) {
  .content {
    flex-direction: column;
  }

  .articleSide {
    margin-left: 0;
    margin-top: 40px;
  }
}

.socialShare {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2em;
  margin-top: 2em;
}

.socialShare a {
  flex-grow: 1;
}

.socialShare a:not(:first-child) {
  margin-left: .5em;
}

.socialShare button {
  width: 100%;
  border: 0;
  color: #fff;
  padding: 0;
  font-size: .8em;
  height: 3em;
  border-radius: 4px;
  letter-spacing: .2;
}

.socialShare button i {
  margin-right: 1em;
}

.socialShare .twitter button {
  background-color: #1da1f2;
}

.socialShare .facebook button {
  background-color: #3b5998;
}

.socialShare .reddit button {
  background-color: #5f99cf;
}

.socialShare .print button {
  background-color: #ff4500;
}

@media only screen and (max-width: 600px) {
  .socialText {
    display: none;
  }

  .socialShare button i {
    margin-right: 0;
  }
}