html,body{height:100%;}
body {
  font-family: Roboto,helvetica,arial,microsoft yahei,hiragino sans, sans-serif;
  font-weight: 300;
}
main{
  opacity:0;
  transition:opacity .5s;
  min-height: 80%;
}
a{
  font-family: hiragino sans gb, calibri, sans-serif;
  text-decoration: none;
}
.container{
  max-width: 75em;
}
.alignment{
  padding: 0 4em;
}
.alignment-double{
  padding: 0 8em;
}
.alignment-top{
  padding-top: 2em;
}
.nav{
  background-color:#258ae2;
  background-image: linear-gradient(to right, #228ce2, #1c81d3);
  color: rgba(255,255,255,.5);
  font-style: italic;
  fill: rgba(255,255,255,.5);
  /*color:#7eb9f1*/
}
.nav .nav-menu-item:hover > a,
.nav .nav-submenu-item:hover > a{
  color:white;
}
.nav.fullpage{
}
.nav.semi-transparent{
  background:rgba(255,255,255,.2);
}
.footer{
  clear: left;
  margin: 2em 0;
  padding-top: 2em;
  text-align: center;
}
.footer.fixed{
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
}

.banner{
  padding: 1em;
}
.card{
  margin:0 1em;
  padding: 0 2em;
}
.jumbotron{
  width:100%;
}

.toggle-button{
  cursor: pointer;
}

#light-box.active{
  visibility: visible;
  opacity: 1;
}
#light-box{
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 5em 0;
  z-index: 9999;
  background: rgba(0,0,0,.8);
  opacity: 0;
  transition: opacity .3s;
}


@media (max-width:800px){
  .card{
    margin: 0 1em;
  }

  img.media-m{
    font-size: .8em;
  }
}
@media (max-width:540px){
  .card{
    margin: 0 .5em;
  }
  img.media-s{
    font-size: .6em;
  }
  img.media-ss{
    font-size:.3em;
  }
}