#top-bar.ui.grid{ padding: 0; margin: 0 }
h1.logo{
  margin: 0;
  padding: 0 !important;
}
.logo a {
  display: block;
  width: 200px;
  height: 115px;
  background: url(../images/logo.svg) no-repeat scroll 0 50% / 100%;
  text-indent: -2000px;
  overflow: hidden;
}
.logo.white a{
  background-image: url(../images/logo-white.svg);
}

#top-bar .menu .menu a{ border: 1px solid #fff }
#top-bar .menu .menu .active.item {
  background: #d94f34;
  color: #fff;
  cursor: default;
}
#top-bar .menu .menu a:hover:not(.active) {
  background: #fff;
  border: 1px solid rgb(9, 34, 54, 0.2);
}
#top-bar .menu{
  border: 0 none;
  box-shadow: none;
}
#top-bar .mobile{
  padding: 0.2em 0.2em 0.15em 1.5em
}
#top-bar .mobile .menu .item:before{ display: none }
#top-bar .mobile .menu .icon{ font-size: 2em }
#top-bar .mobile .logo a{
  width: 110px;
  height: 63px;
}
#top-bar .container { margin: 0 auto !important }
.ui.sidebar.vertical.menu .item { padding: 1.5em }

canvas { height: 100vh }
.menu-open { cursor: pointer }
.canvas-text {
  color: white;
  font-weight: 700;
  position: absolute;
  top: 49%;
  left: 0;
  right: 0;
  text-align: center;
  transform: translate(0, -50%);
}
canvas, .canvas-text, #animation{
  margin: 0 !important;
  padding: 0 !important;
}
#animation{
  position: relative;
  min-height: 230px !important;
}
.canvas-text .button { margin-right: 0.4em; margin-left: 0.4em }

#main { margin: 0 }
#main .meetopenwisp{
  padding: 0;
  margin-bottom: -2.5em;
}
#main .meetopenwisp .content{
  clear: left;
  margin: 4em 0;
  overflow: visible;
}
#main .meetopenwisp .content h2{
  margin: 0 0 0.5em 0;
}
#main .meetopenwisp .content p{
  font-size: 1.3em;
}
#main .meetopenwisp img{
  float: left;
  width: 100px;
  margin-right: 1.5em;
  position: relative;
}
#main .badges img{
  width: 150px;
  margin: 0 1em 1em;
}
#main .badges img.django{
  border: 1px solid #072e1f;
  border-radius: 100%
}
#main .badges{ margin-bottom: 0 }

@media only screen and (max-width: 600px) {

  #main .meetopenwisp img{
    float: none;
    margin: 0 auto 1em;
  }
  #main .meetopenwisp .content{
    text-align: center;
    margin: 3em 0;
  }
}
#main .meetopenwisp .content:first-child{
  margin-top: 1.5em
}
#main .meetopenwisp .content:last-child{
  margin-bottom: 0
}
#main .news h1 { margin: 0 }
#main .news .icon {
  font-size: 2.5em;
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
  margin: 0 10px 0 0;
  float: left;
  bottom: -0.35em;
  position: relative;
}
#main .news .content {
  margin-bottom: 1em
}
#main .news .header{
  margin-bottom: 0.5em;
  font-weight: bold;
}
.padding-vertical {
  padding-top: 2em !important;
  padding-bottom: 2em !important
}
.padding-vertical:last-child{
  padding-bottom: 1em !important;
}
a {
  color: #d12800;
  text-decoration: underline;
  font-weight: bold;
}
a:hover { color: #d94f34; text-decoration: none }
p.center { text-align: center }
p.buttons .button{ margin-bottom: 1em }
p.buttons .button:last-child{ margin-bottom: 0 }
.button.inverted.grey{ color: #767676 !important }
body.content #top-bar{
  max-width: 1000px;
  margin: 0 auto !important;
}
body.content #top-bar .logo {
  margin-left: 0;
  margin-right: 0;
}
body.content #main article {
  max-width: 1000px !important;
  padding: 0 0.5em 1em;
  margin: 0 auto;
  text-align: justify;
}
body.content.readable #main article{
  font-size: 1.2em;
}
@media only screen and (min-width: 1000px) {

  body.content #top-bar > div {
    padding-left: 0.5em !important;
    padding-right: 0 !important;
  }
}
body.content .buttons { margin-bottom: -1em }
body.content .buttons:last-child{ margin-bottom: 0 }
body.content .buttons .button{ margin-bottom: 1em }
body.content #footer .container {
  max-width: 1000px !important;
}
body.content #main p,
body.content #main li,
body.content #main div,
body.content #main blockquote,
.feed p, .feed li, .feed blockquote
{
  line-height: 1.8em
}
body.content #main h1,
body.content #main h2,
body.content #main h3,
body.content #main h4,
body.content #main li{
  text-align: left;
}
body.content iframe {
  border: 1px solid rgba(0, 0, 0, 0.2);
}
body.content ul ul{
  margin-left: 1.8em !important
}

@media only screen and (max-width: 400px) {

  body.content #main p,
  body.content #main li,
  body.content #main div,
  body.content #main blockquote{
    line-height: 1.6em
  }
  body.content #main article{
    font-size: 1.2em
  }
  body.content iframe{
    max-height: 200px;
  }
}
#footer {
  background: rgba(0, 0, 0, 1) !important;
  padding-bottom: 2.5em !important;
}
#footer .logo {
  width: 20%;
  padding: 0
}
#footer .social {
  padding: 2.03em 1em 1.5em;
  width: 80%
}
#footer .social a { margin-right: 1em }
#footer .button {
  width: 60%;
  max-width: 130px;
  margin: 0 0.5em 1em 0.5em !important;
  padding: 0.8em 1em 0.8em
}
#footer { text-align: center }
#footer .logo a { margin: 0 auto }
#footer p { line-height: 1.8em }
#footer .button {
  margin: 0 0.5em 1em 0.5em !important
}
@media only screen and (max-width: 800px) {
  #footer p:last-child { width: 100% }
}
#load-more {
  display: block;
  margin: 1.5em auto 2em;
  width: 200px;
}
.feed .date { color: rgba(0, 0, 0, 0.8) !important }
.feed .header svg {
  margin-right: 5px;
  margin-bottom: -1px;
}
.feed .event pre {
  max-width: 100%;
  overflow-x: auto;
  margin: 1em 0;
  padding: 1em;
  font-weight: normal;
  line-height: 2em;
  border: 1px solid #ccc;
  display: block;
  white-space: pre;
}
.feed p > code {
  border: 1px solid #ccc;
  padding: 4px;
  margin: 0 2px;
  background: rgba(0,0,0, 0.05);
  color: #d12800;
  font-weight: normal;
}
.feed .content {
  width: 100%;
  overflow-x: hidden;
}
.feed h3 code {
  background: rgba(0,0,0, 0.05);
  padding: 4px;
}
.feed blockquote {
  margin: .75em 0;
  padding-left: 15px;
  border-left: 3px solid #ddd;
  color: rgba(0,0,0,.5);
}
#main .task-list-item input[type=checkbox]{ margin-left: 0 !important }
.loading-overlay{
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}
.loading-overlay.initial{
  background: #fff;
}
.spinner {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.8);
  margin: 0 auto;
  border-radius: 100%;
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0)
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
#main #github{
  margin-top: 0;
}
#main #github div,
#main #github p{
  font-size: 14px;
}
#main .feed>.event>.content .summary img {
  width: auto;
  height: auto;
  max-width: 100%;
}
.chat .buttons{
  margin: 0 3px 0 3px;
}