@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);

a:focus {
    background: none
}

.active {
    font-weight: 700
}

@font-face {
    font-family: icomoon;
    font-weight: 400;
    font-style: normal
}

body, html {
    font-size: 100%;
    padding: 0;
    margin: 0;
    height: 100%
}

*, :after, :before {
    box-sizing: border-box
}

body {
    font-family: Lato, Calibri, Arial, sans-serif;
    color: #f2ede3;
    background: #333;
    font-size: .9em;
    font-weight: 300
}

a {
    color: #f0f0f0;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 0 5px;
    text-transform: uppercase;
    font-size: 80%
}

a:hover {
    color: #fff
}

.container {
    height: 100%
}

.container.main {
    margin: 0;
    padding: 0
}

.icon-close {
    position: absolute;
    top: 20px;
    right: 15px;
    font-size: 35px;
    cursor: pointer;
    z-index: 100
}

.icon-close:hover {
    text-decoration: none
}

.detail-page.bl-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 60px 30px 30px;
    overflow: hidden
}

.detail-page.bl-content > div.row-fluid {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%
}

.detail-page.bl-content p {
    margin: 0 auto;
    padding-bottom: 15px;
    font-size: 1.7em;
    line-height: 1.8
}

.detail-page.bl-content h2 {
    font-size: 3em;
    font-weight: 300;
    margin: 0 0 20px
}

.detail-page.bl-content article {
    padding: 20px 40px 20px 0
}

.detail-page.bl-content article h3 {
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 10px;
    padding-top: 20px;
    font-size: 1.4em
}

.detail-page.bl-content article a {
    color: rgba(0, 0, 0, .2)
}

.detail-page.bl-content ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.detail-page.bl-content ul li {
    display: inline-block
}

.detail-page.bl-content ul li span {
    display: block;
    padding: 0
}

.detail-page.bl-content ul li span img {
    display: block;
    max-width: 100%
}

.col-xs-4 > ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.page-enter {
    opacity: .01
}

.page-enter.page-enter-active {
    opacity: 1;
    -webkit-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in
}

.page-leave {
    opacity: 1
}

.page-leave.page-leave-active {
    opacity: .01;
    -webkit-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in
}

.page-appear {
    opacity: .01
}

.page-appear.page-appear-active {
    opacity: 1;
    -webkit-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in
}

.about-content.bl-content {
    background: #144057
}

.skill {
    text-align: center
}

.span4 > ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.progress {
    height: 40px;
    border-radius: 0;
    background: transparent !important;
    margin-bottom: 10px
}

.bar, .progress {
    -webkit-box-shadow: transparent 0 0 0 inset
}

.bar {
    height: 35px;
    font-weight: 400;
    font-size: 14px !important;
    line-height: 40px;
    background: #c9ab8b !important;
    border: 0;
    text-shadow: none !important;
    text-align: left !important;
    padding-left: 30px !important
}

.about-us h3 {
    font-size: 16px;
    color: #c9ab8b;
    padding-bottom: 10px
}

.about-us i {
    font-size: 22px;
    color: #fff;
    padding-right: 10px
}

.project-enter {
    top: 100%
}

.project-enter.project-enter-active {
    top: 0;
    -webkit-transition: top .5s ease-in;
    transition: top .5s ease-in
}

.project-wrap.project-leave {
    top: 0
}

.project-wrap.project-leave.project-leave-active {
    top: 100%;
    -webkit-transition: top 5s ease-in;
    transition: top 5s ease-in
}

.project-wrap.project-appear {
    top: 100%
}

.project-wrap.project-appear.project-appear-active {
    top: 0;
    -webkit-transition: top .2s ease-in;
    transition: top .2s ease-in
}

.project-wrap {
    background: #16a085;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 101
}

.project-wrap .content {
    bottom: 90px;
    top: 60px;
    width: 80%;
    position: absolute;
    overflow-y: auto;
    overflow-x: hidden
}

.project-wrap .content .detail-text {
    font-size: 1.3em;
    margin-right: 10px
}

.project-wrap nav {
    position: absolute;
    z-index: 9999;
    width: 250px;
    left: 50%;
    bottom: 20px;
    margin-left: -108px;
    -webkit-transition: opacity .2s ease-in-out .5s;
    transition: opacity .2s ease-in-out .5s
}

.project-wrap nav span {
    float: left;
    margin: 5px
}

.project-wrap nav span.icon-close {
    position: static
}

.project-wrap nav span.bl-next-work {
    font-weight: 700;
    letter-spacing: 2px;
    display: block;
    text-transform: uppercase;
    line-height: 2em;
    cursor: pointer;
    margin-right: 2em
}

.blog-content.bl-content {
    background: #ee6557
}

.blog-content.bl-content article img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0
}

.contacts-content.bl-content {
    background: #bfbfbf
}

.social-network {
    display: inline-block;
    background: url(/social-networks.png) no-repeat 0 0;
    width: 40px;
    height: 40px;
    margin: 0 4px 0 0;
    background-position-y: -40px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    cursor: pointer
}

.social-network.aim {
    background-position: 0 0
}

.social-network.amazon {
    background-position: -40px 0
}

.social-network.apple {
    background-position: -80px 0
}

.social-network.behance {
    background-position: -120px 0
}

.social-network.blogger {
    background-position: -160px 0
}

.social-network.delicious {
    background-position: -200px 0
}

.social-network.deviantart {
    background-position: -240px 0
}

.social-network.digg {
    background-position: -280px 0
}

.social-network.dribbble {
    background-position: -320px 0
}

.social-network.ebay {
    background-position: -360px 0
}

.social-network.evernote {
    background-position: -400px 0
}

.social-network.facebook {
    background-position: -440px 0
}

.social-network.feedburner {
    background-position: -480px 0
}

.social-network.flickr {
    background-position: -520px 0
}

.social-network.forrst {
    background-position: -560px 0
}

.social-network.foursquare {
    background-position: -600px 0
}

.social-network.github {
    background-position: -640px 0
}

.social-network.google {
    background-position: -680px 0
}

.social-network.gowalla {
    background-position: -720px 0
}

.social-network.icq {
    background-position: -760px 0
}

.social-network.itunes {
    background-position: -800px 0
}

.social-network.lastfm {
    background-position: -840px 0
}

.social-network.linkedin {
    background-position: -880px 0
}

.social-network.meetup {
    background-position: -920px 0
}

.social-network.ms {
    background-position: -960px 0
}

.social-network.newsvine {
    background-position: -1000px 0
}

.social-network.openid {
    background-position: -1040px 0
}

.social-network.paypal {
    background-position: -1080px 0
}

.social-network.picasa {
    background-position: -1120px 0
}

.social-network.pinterest {
    background-position: -1160px 0
}

.social-network.posterous {
    background-position: -1200px 0
}

.social-network.reddit {
    background-position: -1240px 0
}

.social-network.rss {
    background-position: -1280px 0
}

.social-network.skype {
    background-position: -1320px 0
}

.social-network.slashdot {
    background-position: -1360px 0
}

.social-network.soundcloud {
    background-position: -1400px 0
}

.social-network.stumbleupon {
    background-position: -1440px 0
}

.social-network.technorati {
    background-position: -1480px 0
}

.social-network.tumblr {
    background-position: -1520px 0
}

.social-network.twitter {
    background-position: -1560px 0
}

.social-network.viddler {
    background-position: -1600px 0
}

.social-network.vimeo {
    background-position: -1640px 0
}

.social-network.virb {
    background-position: -1680px 0
}

.social-network.wordpress {
    background-position: -1720px 0
}

.social-network.xing {
    background-position: -1760px 0
}

.social-network.yahoo {
    background-position: -1800px 0
}

.social-network.yelp {
    background-position: -1840px 0
}

.social-network.youtube {
    background-position: -1880px 0
}

.social-network.zerply {
    background-position: -1920px 0
}

.active .social-network.aim, .social-network.aim:hover {
    background-position: 0 -40px
}

.active .social-network.amazon, .social-network.amazon:hover {
    background-position: -40px -40px
}

.active .social-network.apple, .social-network.apple:hover {
    background-position: -80px -40px
}

.active .social-network.behance, .social-network.behance:hover {
    background-position: -120px -40px
}

.active .social-network.blogger, .social-network.blogger:hover {
    background-position: -160px -40px
}

.active .social-network.delicious, .social-network.delicious:hover {
    background-position: -200px -40px
}

.active .social-network.deviantart, .social-network.deviantart:hover {
    background-position: -240px -40px
}

.active .social-network.digg, .social-network.digg:hover {
    background-position: -280px -40px
}

.active .social-network.dribbble, .social-network.dribbble:hover {
    background-position: -320px -40px
}

.active .social-network.ebay, .social-network.ebay:hover {
    background-position: -360px -40px
}

.active .social-network.evernote, .social-network.evernote:hover {
    background-position: -400px -40px
}

.active .social-network.facebook, .social-network.facebook:hover {
    background-position: -440px -40px
}

.active .social-network.feedburner, .social-network.feedburner:hover {
    background-position: -480px -40px
}

.active .social-network.flickr, .social-network.flickr:hover {
    background-position: -520px -40px
}

.active .social-network.forrst, .social-network.forrst:hover {
    background-position: -560px -40px
}

.active .social-network.foursquare, .social-network.foursquare:hover {
    background-position: -600px -40px
}

.active .social-network.github, .social-network.github:hover {
    background-position: -640px -40px
}

.active .social-network.google, .social-network.google:hover {
    background-position: -680px -40px
}

.active .social-network.gowalla, .social-network.gowalla:hover {
    background-position: -720px -40px
}

.active .social-network.icq, .social-network.icq:hover {
    background-position: -760px -40px
}

.active .social-network.itunes, .social-network.itunes:hover {
    background-position: -800px -40px
}

.active .social-network.lastfm, .social-network.lastfm:hover {
    background-position: -840px -40px
}

.active .social-network.linkedin, .social-network.linkedin:hover {
    background-position: -880px -40px
}

.active .social-network.meetup, .social-network.meetup:hover {
    background-position: -920px -40px
}

.active .social-network.ms, .social-network.ms:hover {
    background-position: -960px -40px
}

.active .social-network.newsvine, .social-network.newsvine:hover {
    background-position: -1000px -40px
}

.active .social-network.openid, .social-network.openid:hover {
    background-position: -1040px -40px
}

.active .social-network.paypal, .social-network.paypal:hover {
    background-position: -1080px -40px
}

.active .social-network.picasa, .social-network.picasa:hover {
    background-position: -1120px -40px
}

.active .social-network.pinterest, .social-network.pinterest:hover {
    background-position: -1160px -40px
}

.active .social-network.posterous, .social-network.posterous:hover {
    background-position: -1200px -40px
}

.active .social-network.reddit, .social-network.reddit:hover {
    background-position: -1240px -40px
}

.active .social-network.rss, .social-network.rss:hover {
    background-position: -1280px -40px
}

.active .social-network.skype, .social-network.skype:hover {
    background-position: -1320px -40px
}

.active .social-network.slashdot, .social-network.slashdot:hover {
    background-position: -1360px -40px
}

.active .social-network.soundcloud, .social-network.soundcloud:hover {
    background-position: -1400px -40px
}

.active .social-network.stumbleupon, .social-network.stumbleupon:hover {
    background-position: -1440px -40px
}

.active .social-network.technorati, .social-network.technorati:hover {
    background-position: -1480px -40px
}

.active .social-network.tumblr, .social-network.tumblr:hover {
    background-position: -1520px -40px
}

.active .social-network.twitter, .social-network.twitter:hover {
    background-position: -1560px -40px
}

.active .social-network.viddler, .social-network.viddler:hover {
    background-position: -1600px -40px
}

.active .social-network.vimeo, .social-network.vimeo:hover {
    background-position: -1640px -40px
}

.active .social-network.virb, .social-network.virb:hover {
    background-position: -1680px -40px
}

.active .social-network.wordpress, .social-network.wordpress:hover {
    background-position: -1720px -40px
}

.active .social-network.xing, .social-network.xing:hover {
    background-position: -1760px -40px
}

.active .social-network.yahoo, .social-network.yahoo:hover {
    background-position: -1800px -40px
}

.active .social-network.yelp, .social-network.yelp:hover {
    background-position: -1840px -40px
}

.active .social-network.youtube, .social-network.youtube:hover {
    background-position: -1880px -40px
}

.active .social-network.zerply, .social-network.zerply:hover {
    background-position: -1920px -40px
}

.bl-main {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.bl-main div div section {
    position: absolute;
    width: 50%;
    height: 50%;
    background-size: cover !important
}

.bl-main div div section .bl-box {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.bl-main div div section .bl-box:hover h2 {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px)
}

.bl-main div div section .bl-box h2 {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    text-align: center;
    margin: 0;
    padding: 20px;
    width: 100%
}

.bl-main div div section .bl-box h2 a {
    letter-spacing: 2px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none
}

.example-enter.example-enter-active {
    opacity: 1;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in
}

.example-leave {
    opacity: 1
}

.example-leave.example-leave-active {
    opacity: .01;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in
}

.example-appear {
    opacity: .01
}

.example-appear.example-appear-active {
    opacity: 1;
    top: 0;
    -webkit-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in
}

.block-1 {
    top: 0;
    left: 0
}

.block-1-appear {
    opacity: .01;
    top: -50px;
    left: -50px
}

.block-1-appear.block-1-appear-active {
    opacity: 1;
    top: 0;
    left: 0;
    -webkit-transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in;
    transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in
}

.block-1-leave {
    opacity: 1
}

.block-1-leave.block-1-leave-active {
    opacity: .01;
    -webkit-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in
}

.block-2 {
    top: 0;
    left: 50%
}

.block-2-appear {
    opacity: .01;
    top: -50px;
    left: calc(50% + 50px)
}

.block-2-appear.block-2-appear-active {
    opacity: 1;
    top: 0;
    left: 50%;
    -webkit-transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in;
    transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in
}

.block-3 {
    top: 50%;
    left: 0
}

.block-3-appear {
    opacity: .01;
    top: calc(50% + 50px);
    left: -50px
}

.block-3-appear.block-3-appear-active {
    opacity: 1;
    top: 50%;
    left: 0;
    -webkit-transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in;
    transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in
}

.block-4 {
    top: 50%;
    left: 50%
}

.block-4-appear {
    opacity: .01;
    top: calc(50% + 50px);
    left: calc(50% + 50px)
}

.block-4-appear.block-4-appear-active {
    opacity: 1;
    top: 50%;
    left: 50%;
    -webkit-transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in;
    transition: top .5s ease-in, left .5s ease-in, opacity .5s ease-in
}

.example-enter {
    opacity: .01
}