@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css");
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Permanent+Marker");
@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro");

code{
    background:#ddd;
    padding:5px;
    line-height:1.4;
    font-size:12px;
    border:1px solid #aaa;
    font-family:Source Code Pro,monospace;
    display:block
}
strong{
    letter-spacing:2px;
    font-weight:300;
    background:#ddd;
    padding:5px;
    border:1px solid #aaa;
    font-size:14px;
    color:#000
}

.tr{
    text-align:right
}
.heading{
    font-family:Permanent Marker,cursive;
    font-weight:400;
    margin:0
}

.nav__brand{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:center;
    justify-content:center
}
.nav__logo{
    max-width:64px;
    margin-right:10px
}
.nav__container{
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between;
    position:relative
}
.nav__container,.nav__title{
    display:-ms-flexbox;
    display:flex
}
.nav__title{
    margin:0;
    color:#00cf7d;
    font-size:24px;
    letter-spacing:2px;
    text-transform:uppercase
}
.nav__menu{
    list-style:none;
    padding:0;
    margin:0;
    text-align:center
}
.nav__item{
    display:inline-block;
    margin:0 10px
}
.nav__link{
    display:block;
    height:55px;
    line-height:51px;
    border-top:2px solid transparent;
    border-bottom:2px solid transparent;
    text-decoration:none;
    color:#fff;
    font-size:16px;
    letter-spacing:2px;
    transition:color .2s ease
}
.nav__link:hover{
    color:#00cf7d
}
.nav__link--active{
    color:#fff;
    border-bottom-color:#00cf7d
}
.nav__github{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:end;
    justify-content:flex-end;
    text-decoration:none;
    color:#fff;
    font-size:13px;
    letter-spacing:.3px;
    transition:color .5s ease
}
.nav__github svg{
    display:block;
    width:20px;
    fill:#fff;
    margin-right:10px;
    transition:fill .5s ease
}
.nav__github:hover{
    color:#00cf7d
}
.nav__github:hover svg{
    fill:#00cf7d
}
.hello{
    background-color:#00955e;
    padding:55px 0
}
.hello__container{
    height:100%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-direction:column;
    flex-direction:column
}
.hello__ .hello__logo{
    display:block;
    margin:0 auto 20px;
    width:200px
}
.demo-section{
    padding:40px 0
}
.demo-section--light{
    background:#f8f8f8
}
.demo-section__heading{
    text-align:center;
    color:#00955e
}
.demo-list{
    list-style:none;
    padding:0;
    margin:22px 0;
    text-align:center;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.demo-list__item{
    width:49%
}
.demo-list__link{
    display:block;
    padding:10px 20px;
    text-decoration:none;
    color:#fff;
    background:#00955e;
    border-radius:5px;
    font-size:13px
}
@media (max-width:768px){
    .demo-list__item{
        width:100%
    }
    
}
.coming-soon{
    color:#00cf7d
}