@import url(https://fonts.googleapis.com/css?family=Lato:400,300&subset=latin,latin-ext);  

@import url('fonts/foundation-icons.css');
body * {
    font-family: 'Lato', sans-serif;
}

body {
    background: #fdfdfd;
    /*color: #747474;*/
    height: 100%;
}

#wrap {
    margin: 0;
    min-height: 100%;
    min-width: 300px;
    overflow: hidden;
    padding-bottom: 77px;
    width: 100%;
    height: auto !import;
}

#footer {
    height: 77px;
    margin-top: -77px;
    background: #f4f4f4 none repeat scroll 0 0;
    min-height: 77px;
}

#footer a {
    font-size: 24px;
    display: inline-block;
    padding: 10px 20px 10px 0;
    color: #56565a;
    margin-right: 20px;
}

#footer a:hover {
    color: #da486a;
}

#footer .columns {
    padding-bottom: 0;
}

body header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

body header h1 a {
    font-size: 1.6rem;
}

body h4 {
    font-size: 18px;
}

.contain-to-grid {
    width: 100%;
    background: #fff;
}

.grid img {
    opacity: 0.1;
}

.grid img.loaded {
    opacity: 1;
}

section.content {
    padding: 2rem 0;
}

a i.fi-mail {
    margin-right: 8px;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
    background-color: #a04f62;
}

a {
    color: #000000;
    line-height: inherit;
    text-decoration: none;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

a:hover {
    color: #da486a;
    text-decoration: none;
}

.columns {
    padding-bottom: 3rem;
}

.top-bar .toggle-topbar.menu-icon a {
    color: #303030;
    padding: 0 0.9375rem;
}

.top-bar .toggle-topbar.menu-icon a span::after {
    content: none;
}

.top-bar .toggle-topbar.menu-icon a {
    display: table;
}

.top-bar .toggle-topbar.menu-icon a > span {
    display: table-cell;
    vertical-align: middle;
}

.top-bar .menu-toggle-btn {
    margin: 0 0 0 5px;
    cursor: pointer;
    width: 28px;
    height: 28px;
}

.top-bar .menu-icon .menu-toggle-btn span {
    background: #303030;
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 5px;
    margin-bottom: 5px;
    -webkit-transition: all 0.5s linear;
    transition: all 0.3s linear;
}

.top-bar.expanded .menu-icon .menu-toggle-btn span:nth-child(1),
.top-bar.expanded .menu-icon .menu-toggle-btn span:nth-child(3) {
    transform: translate(0px, 2px) rotate(-45deg) scalex(1.2);
    margin: 0;
}

.top-bar.expanded .menu-icon .menu-toggle-btn span:nth-child(3) {
    transform: translate(0px, -2px) rotate(45deg) scalex(1.2);
    margin: 0;
}

.top-bar.expanded .menu-icon .menu-toggle-btn span:nth-child(2) {
    height: 0;
    margin: 0;
}


/* menu */

.top-bar {
    background: #fff;
    height: 4.8125rem;
    line-height: 4.8125rem;
    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    -ms-transition: height .3s ease-in-out;
    -o-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
}

.top-bar.expanded {
    height: 390px;
}

.top-bar .name h1,
.top-bar .name h2,
.top-bar .name h3,
.top-bar .name h4,
.top-bar .name p,
.top-bar .name span {
    line-height: 4.8125rem;
}

.top-bar-section li:not(.has-form) a:not(.button) {
    line-height: 4.8125rem;
    padding: 0 1.9375rem;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.top-bar-section li:hover:not(.has-form) a:not(.button) {
    background: #f4f4f4;
    color: #56565a;
}

.top-bar .name h1 a,
.top-bar .name h2 a,
.top-bar .name h3 a,
.top-bar .name h4 a,
.top-bar .name p a,
.top-bar .name span a {
    color: #303030;
}

.top-bar .name {
    height: auto;
    margin: 0 30px 0 0;
}

.top-bar.expanded .title-area {
    background: #fff;
}

.top-bar-section ul li,
.top-bar-section li:not(.has-form) a:not(.button) {
    background: transparent;
}

.top-bar-section ul li > a {
    background: #fff;
    color: #303030;
    font-size: 0.967rem;
    font-family: 'Josefin Sans', sans-serif;
    -webkit-transition: background 300ms ease-in-out;
    -moz-transition: background 300ms ease-in-out;
    -ms-transition: background 300ms ease-in-out;
    -o-transition: background 300ms ease-in-out;
    transition: background 300ms ease-in-out;
}

@media only screen and (max-width: 639px) {
    .top-bar-section ul li > a {
        border-bottom: 1px solid #ccc;
    }
    .top-bar-section ul li,
    .top-bar-section li:not(.has-form) a:not(.button) {
        background: transparent;
    }
}