.row {
  display: flex; }

.col-1 {
  width: calc(100% / 12 * 1); }

.col-2 {
  width: calc(100% / 12 * 2); }

.col-3 {
  width: calc(100% / 12 * 3); }

.col-4 {
  width: calc(100% / 12 * 4); }

.col-5 {
  width: calc(100% / 12 * 5); }

.col-6 {
  width: calc(100% / 12 * 6); }

.col-7 {
  width: calc(100% / 12 * 7); }

.col-8 {
  width: calc(100% / 12 * 8); }

.col-9 {
  width: calc(100% / 12 * 9); }

.col-10 {
  width: calc(100% / 12 * 10); }

.col-11 {
  width: calc(100% / 12 * 11); }

.col-12 {
  width: calc(100% / 12 * 12); }

/*@media (max-width: 600px) {
  .row {
    display: block;
  }
  [class^="col"] {
    width: 100%;
  }
}

*/
body {
  font-family: 'Lato', sans-serif;
  min-height: 100vh; }

a, body {
  color: #6b6b6b; }

* {
  box-sizing: border-box; }

.padding, #events, #event, #ecosystems, #about, #account, #settings, #events #eventFilter #eventTagFilter, #event .container .text .left, #event .container .text .right .block, #ecosystems .row .text, #login, #account #profile .col-9 {
  padding: 1em; }

.padding-no-collapse, #events #eventGrid .eventPreview .dateInfo, #events #eventGrid .eventPreview .col-9, #about .container .bottomBorder, #settings .border-bottom, #settings #event .container img, #event .container #settings img, #settings .row, #settings #buttons {
  padding: 1em; }

@media (max-width: 600px) {
  .padding, #events, #event, #ecosystems, #about, #account, #settings, #events #eventFilter #eventTagFilter, #event .container .text .left, #event .container .text .right .block, #ecosystems .row .text, #login, #account #profile .col-9 {
    padding: 1em 0; } }

.button, button, input[type=submit], #account #profile .col-9 .buttons button {
  padding: 0.5em 1em;
  background-color: white; }

.notification {
  top: 2.5em;
  right: 2.5em;
  max-width: 350px;
  border-radius: 5px;
  position: fixed;
  background-color: white;
  z-index: 10;
  box-shadow: 1px 6px 10px 0 #cbcbcb;
  padding: 1em;
  background-color: rgba(255, 105, 97, 0.68);
  animation-name: notification;
  animation-duration: 0.2s; }

@keyframes notification {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1);
    transform: translate3d(0, 40px, 0) scale3d(0.1, 0.6, 1); }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1); } }

.button, button, input[type=submit], #account #profile .col-9 .buttons button, #events #eventFilter, #events #eventGrid .eventPreview, #event .container, #event .container .text .right .button, #event .container .text .right button, #event .container .text .right input[type=submit], #ecosystems .row, #about .container, #login, #login button, #login #loginButton, #account #profile, #account #attends, #settings .lightShadow {
  box-shadow: 0 0 5px 0 #cbcbcb; }

#events #eventFilter #eventTagFilter button, #event .container .text .right .button, #event .container .text .right button, #event .container .text .right input[type=submit], #event .container .text .right #account #profile .col-9 .buttons button, #account #profile .col-9 .buttons #event .container .text .right button {
  margin: 0.3em;
  border: none;
  padding: 0.5em;
  border-radius: 99px;
  text-transform: capitalize; }

#events, #event, #ecosystems, #about, #account, #settings {
  max-width: 960px;
  margin: 0 auto; }

#navBar {
  text-align: right;
  box-shadow: 0 5px 6px -3px rgba(0, 0, 0, 0.4);
  z-index: 100;
  padding: 0 1em; }
  #navBar i {
    padding: 1em;
    color: #000;
    font-size: 1.5em; }
  #navBar i:hover {
    cursor: pointer; }
  #navBar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden; }
    #navBar ul li {
      float: right; }
      #navBar ul li a {
        display: block;
        text-align: center;
        padding: 23px 20px;
        text-decoration: none; }
      #navBar ul li a:hover {
        cursor: pointer; }
  #navBar img {
    height: 20px;
    float: left;
    transform: translateY(130%); }
  @media (max-width: 500px) {
    #navBar li {
      float: none !important; } }

#navBar:after {
  clear: both;
  content: "";
  display: block; }

#events .hint {
  margin-bottom: 1em;
  font-style: italic;
  font-size: 0.85em;
  display: none; }

#events #lander {
  padding: 2em 0;
  margin-bottom: 1em; }
  #events #lander img {
    margin-bottom: 2em; }
  @media (max-width: 350px) {
    #events #lander img {
      width: 280px;
      height: auto; } }
  @media (max-width: 600px) {
    #events #lander .container {
      padding: 1em; } }
  #events #lander .container div {
    font-weight: 300;
    font-size: 2.6em;
    opacity: 0.9;
    line-height: 1.5em; }

#events #eventFilter #eventTagFilter {
  margin-top: 1em; }
  #events #eventFilter #eventTagFilter button:focus {
    outline: 0; }

#events #eventFilter #eventTypeSelector {
  padding-top: 1em;
  text-align: center;
  /*
      select {
        width: $width;
        height: $height;
        opacity: 0;
        z-index: 1;
      }

      span {
        width: $width;
        line-height: $height;

        @extend .border;

        position: absolute;
        text-align: center;
        text-transform: capitalize;

        background-color: white;

        .fa-angle-down {
          font-size: 16px;
          margin-left: 6px;
        }
      }*/ }
  #events #eventFilter #eventTypeSelector button {
    background-color: white;
    border: none;
    outline: 0;
    padding: 1em 1.2em;
    box-shadow: none; }
  #events #eventFilter #eventTypeSelector .selected {
    border-bottom: 4px solid #FF5A5F; }

#events #eventGrid {
  margin-top: 1em;
  padding: 1em 0; }
  #events #eventGrid a {
    text-decoration: none; }
  #events #eventGrid .eventPreview:hover {
    box-shadow: 0 0 10px 0 #acacac; }
    #events #eventGrid .eventPreview:hover p {
      color: #6b6b6b; }
  #events #eventGrid .eventPreview {
    transition: all 0.2s;
    background-color: white;
    margin-bottom: 1em;
    overflow: hidden; }
    #events #eventGrid .eventPreview h2 {
      margin-top: 0; }
    #events #eventGrid .eventPreview .dateInfo {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      background-color: white;
      z-index: 1; }
    #events #eventGrid .eventPreview .col-9 {
      position: relative; }
    #events #eventGrid .eventPreview .col-3 {
      height: 232px;
      min-width: 232px; }
    @media (max-width: 600px) {
      #events #eventGrid .eventPreview .col-3 {
        height: calc(232px - 50px);
        min-width: calc(232px - 50px);
        margin-bottom: 50px; } }
    @media (max-width: 500px) {
      #events #eventGrid .eventPreview p {
        display: none; } }
    @media (max-width: 400px) {
      #events #eventGrid .eventPreview .col-3 {
        height: calc(232px - 100px);
        min-width: calc(232px - 100px);
        margin-bottom: 100px; } }
    #events #eventGrid .eventPreview p, #events #eventGrid .eventPreview div {
      text-decoration: none; }
    #events #eventGrid .eventPreview p, #events #eventGrid .eventPreview .dateInfo {
      color: #a0a0a0; }
    #events #eventGrid .eventPreview p {
      height: 6em;
      overflow: hidden;
      transition: all 0.2s; }

#event .container img {
  width: 100%; }

#event .container .text {
  margin-top: -3px; }
  #event .container .text h1 {
    margin: 0; }
  #event .container .text .description {
    white-space: pre-wrap; }
  #event .container .text .left {
    width: calc(100% / 4 * 3); }
  #event .container .text .right {
    width: calc(100%/4); }
    #event .container .text .right .block {
      border-width: 0 0 1px 1px;
      border-style: solid;
      margin-left: -1px;
      border-color: #cbcbcb; }
    #event .container .text .right .button, #event .container .text .right button, #event .container .text .right input[type=submit], #event .container .text .right #account #profile .col-9 .buttons button, #account #profile .col-9 .buttons #event .container .text .right button {
      display: inline-block;
      background-color: white; }
  #event .container .text .left, #event .container .text .right {
    float: left; }

#event .container .text:after {
  clear: both;
  content: "";
  display: block; }

#ecosystems a {
  text-decoration: none; }

#ecosystems .row img {
  height: 100%; }

@media (max-width: 875px) {
  #ecosystems .row {
    display: block; }
  #ecosystems [class^="col"] {
    width: 100%; }
  #ecosystems .col-4 {
    width: 100%; }
  #ecosystems .col-8 {
    width: 100%; }
  #ecosystems img {
    max-width: 20em; } }

#about .container h1 {
  margin: 0; }

#about .container h2 {
  margin-top: 0; }

#about .container .col-4 {
  padding: 3em; }

@media (max-width: 600px) {
  #about .container .col-4 {
    max-width: 250px;
    margin: 0 auto;
    padding: 0.5em; } }

#about .container img {
  width: 100%; }

.border-top, #events #eventGrid .eventPreview .dateInfo {
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 1px 0 0 0; }

.border-right, #event .container .text .left {
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 0 1px 0 0; }

.border-bottom, #event .container img, #about .container .bottomBorder, #settings .row {
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 0 0 1px 0; }

.border-left, #events #eventGrid .eventPreview .col-9 {
  border-color: #cbcbcb;
  border-style: solid;
  border-width: 0 0 0 1px; }

.border, .button, button, input[type=submit], #account #profile .col-9 .buttons button, .notification, #login button, #login #loginButton {
  border: solid 1px #cbcbcb; }

#login {
  margin: 0 auto;
  margin-top: 5em;
  max-width: 400px;
  text-align: center; }
  #login h1 {
    margin-top: 0; }
  #login input, #login button {
    margin-bottom: 0.5em; }
  #login label input {
    width: 80%;
    line-height: 1.5em; }
  #login button, #login #loginButton {
    background-color: inherit;
    padding: 0.5em 1em; }
  #login #facebookButton {
    background-color: #3b5998;
    color: #f5f5f5; }
  #login form {
    margin-bottom: 0.5em; }

#account #profile {
  margin-bottom: 1em; }
  @media (max-width: 600px) {
    #account #profile .row {
      display: block; }
    #account #profile [class^="col"] {
      width: 100%; } }
  #account #profile img {
    width: 100%; }
  #account #profile .col-9 {
    position: relative; }
    #account #profile .col-9 .buttons {
      position: absolute;
      bottom: 1em;
      right: 1em; }
    #account #profile .col-9 h1 {
      margin: 0; }

#account #attends h2 {
  margin-top: 0; }

#settings .row {
  padding-bottom: 0;
  padding-top: 0; }
  #settings .row form {
    text-align: center; }
    #settings .row form label {
      display: block;
      margin-bottom: 0.7em; }
      #settings .row form label input {
        line-height: 2em;
        width: 100%; }

#settings #buttons {
  text-align: center; }
  #settings #buttons form {
    display: inline-block; }

#settings h1 {
  margin: 0; }

#settings .lightShadow {
  margin-bottom: 1em; }

#settings .col-6 {
  padding: 2em; }

@media (max-width: 500px) {
  #settings .col-6 {
    padding-left: 0;
    padding-right: 0; } }