body{
  background-color: #fff;
  height: 100%;
}
.container{
  max-width: 380px;
  margin: 0 auto;
  padding: 1em;
}

h1{
  margin: .5em 0 1em 0;
}
.pertimm-logo{
  display: block;
  width: 100px;
  height: 67px;
  margin: 0 auto;
  background: transparent url(../img/logo.png) center center no-repeat;
  text-indent: -9999px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
       only screen and (-moz-min-device-pixel-ratio: 1.3),
       only screen and (-o-min-device-pixel-ratio: 1.3 / 1),
       only screen and (min-resolution: 125dpi),
       only screen and (min-resolution: 1.3dppx) {
  .pertimm-logo {
        background-image: url("../img/logo@2x.png");
        background-size: 100px 67px;
  }
}

.pertimm-logo:focus{
  outline: none;
}

.project{
  text-align: center;
  margin-bottom: 40px;
}

.project h2{
  font-size: 24px;
  font-weight: normal;
  color: #009ACA;
  margin: 0;
}

.project h3{
  font-size: 16px;
  font-weight: normal;
  color: #999;
  margin: .5em 0;
}

.project h3 span{
  font-size: 15px;
}

ul{
  padding: 0;
  font-size: 18px;
}
ul li{
  list-style: none;
  margin: 20px 0;
}

.box{
  display: block;
  padding: 20px;
  line-height: 1.4em;

  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;

  text-decoration: none;
  color: #444;

  box-shadow: 0 1px 2px rgba(0,0,0,.025);

  /* Clearfix */
  *zoom: 1;
}

/* Clearfix */
.box:before,
.box:after {
  content: " ";
  display: table;
}
.box:after {
  clear: both;
}


.box,
.box svg{
  transition: all .1s ease-in-out;
}

.box:hover,
.box:focus{
  color: #00789F;
  border-color: #53BAD0;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.box:hover svg,
.box:focus svg{
  fill: #00789F;
  transform: translateX(2px);
}

.box__title{
  display: block;
  float: left;
  width: calc(100% - 30px);
}
.box__title__primary{
  display: block;
}
.box__title__secondary{
  display: block;
  font-size: .75em;
  color: #999;
  line-height: 1.25em;
}

.box__symbol{
  display: block;
  float: right;
  width: 24px;
  height: 24px;
}

.changelogs {
  text-align: center;
  font-size:13px;
  color:#aaa;
}

.changelogs a{
  color:#aaa;
}
.changelogs a:hover,
.changelogs a:focus{
  color: #009ACA;
}


footer{
  margin: 50px 0 30px 0;
  font-size: 12px;
  text-align: center;
}

footer a{
  color: #999;
  margin: 2px;
  padding: 5px 10px 3px 10px;

  border-radius: 15px;
  text-decoration: none;
  background-color: #fff;
}

footer a:hover,
footer a:focus,
footer a.current{
  color: #fff;
  background-color: #6bc4d7;
}

.modal-overlay{
  top:0;
  right:0;
  position:fixed;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0, 0.5);
}
.modal{
  background-color: #fff;
  border-radius:3px;
  position:fixed;
  width:90%;
  top:5%;
  left:5%;
  box-shadow: 0 2px 2px rgba(0,0,0,.2);
  max-height: 90vh;
  overflow: hidden;
}
.modal-close{
  display:block;
  position:fixed;
  top: calc( 5% + 10px);
  left: calc( 95% - 44px );
  width:34px;
  height:34px;
  background-color:#333;
  border-radius:2px;
}
.modal-close svg{
  width:100%;
  height:100%;
  fill: #ddd;
}
.modal-close:hover{
  background-color:#000;
}
.modal-close:hover svg{
  fill: #fff;
}
.modal__title{
  margin:0;
  font-size:16px;
  font-weight:normal;
  padding:18px 20px 15px 20px;
  line-height:1.4em;
  background-color:#333;
  color:#fff;
  border-top-right-radius:3px;
  border-top-left-radius:3px;
}
.modal__content{
  overflow: scroll;
  max-height: 80vh;
}
.modal__footer{
  border-bottom-right-radius:3px;
  border-bottom-left-radius:3px;
  height:3px;
}
.modal pre{
  background-color: #fff;
  color:#444;
  font-size:14px;
  padding:20px;
  margin:0;
}