/* =====[ FONTS ]================================================================================ */

@font-face {
    font-family: "roboto_light";
    src: url("../fonts/roboto-light.eot");
    src:
        url("../fonts/roboto-light.eot?#iefix") format("embedded-opentype"),
        url("../fonts/roboto-light.woff") format("woff"),
        url("../fonts/roboto-light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "roboto_medium";
    src: url("../fonts/roboto-medium.eot");
    src:
        url("../fonts/roboto-medium.eot?#iefix") format("embedded-opentype"),
        url("../fonts/roboto-medium.woff") format("woff"),
        url("../fonts/roboto-medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "roboto_regular";
    src: url("../fonts/roboto-regular.eot");
    src:
        url("../fonts/roboto-regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/roboto-regular.woff") format("woff"),
        url("../fonts/roboto-regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "museo";
    src: url("museo-700.eot");
    src:
        url("museo-700.eot?#iefix") format("embedded-opentype"),
        url("museo-700.woff") format("woff"),
        url("museo-700.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;

}
/* =====[ GLOBAL STYLES ]======================================================================== */

body {
    min-width: 320px;
    -webkit-backface-visibility: hidden;
}

body,
body a {
    font-family: "roboto_regular";
    font-size: 15px;
    color: #464646;
}

h1,
h1 a {
    font-size: 43px;
    line-height: 50px;
}

h2,
h2 a {
    font-size: 30px;
    line-height: 34px;
}

h3,
h3 a {
    font-size: 24px;
}

h1,
h2,
h3,
h1 a,
h2 a,
h3 a {
    font-family: "roboto_light";
    text-transform: capitalize;
}

p {
    line-height: 26px;   
}

b {
    font-family: "roboto_medium";
}

.clear_both {
    clear: both;
}

.overflow_visible {
    overflow: visible;
}

.placeholder {
    color: #716f6f !important;
}

/* -----[ PAGINATION ]--------------------------------------------------------------------------- */

.pagination [class^="grid_"] {
    margin-top: 20px;
}

.pagination ul {
    display: inline-block;
    overflow: hidden;
}

.pagination li {
    float: left;
}

.pagination a {
    font-family: "roboto_light";
    font-size: 18px;
}

.pagination a:hover {
    color: #000;
}

.pagination li.active a {
    font-family: "roboto_regular";
    cursor: default;
}

.pagination li.active a:hover {
    color: #464646;
}

.pagination .pages li {
    margin-right: 35px;
}

.pagination .move {
    float: right;
}

.pagination .move li {
    margin-left: 35px;
}

/* -----[ MESSAGE FORM ]------------------------------------------------------------------------- */

form.message {
    overflow: hidden;
}

form.message * {
    float: left;
}

form.message [type="text"],
form.message textarea {
    display: block;
    border: 1px solid #c6c6c6;
    border-radius: 2px;
    font-size: 15px;
    color: #575757;
    background-color: #fff;
    box-shadow: 0 2px 0 #f2f2f2 inset;
    -webkit-box-shadow: 0 2px 0 #f2f2f2 inset;
    -moz-box-shadow: 0 2px 0 #f2f2f2 inset;
    -o-box-shadow: 0 2px 0 #f2f2f2 inset;
    -ms-box-shadow: 0 2px 0 #f2f2f2 inset;
}

form.message [type="text"],
form.message textarea,
form.message [type="submit"] {
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
}

form.message [type="text"] {
    padding: 15px 20px 13px;
}

form.message textarea {
    margin: 21px 0 20px;
    padding: 21px 19px;
    height: 88px;
    line-height: 22px;
    font-size: 13px;
}

form.message [type="submit"] {
    margin-right: 26px;
    border: 1px solid #c6c6c6;
    padding: 13px 33px;
    font-size: 15px;
    text-transform: uppercase;
    color: #fff;
    background-color: #575c64;
    cursor: pointer;
    box-shadow: 0 2px 0 #ededed;
    -webkit-box-shadow: 0 2px 0 #ededed;
    -moz-box-shadow: 0 2px 0 #ededed;
    -o-box-shadow: 0 2px 0 #ededed;
    -ms-box-shadow: 0 2px 0 #ededed;
}

form.message p {
    margin-top: 13px;
    font-size: 13px;
    color: #8d8e8e;
}

/* -----[ BUTTON ]------------------------------------------------------------------------------- */

.button {
    display: inline-block;
    position: relative;
}

.button span {
    display: inline-block;
}

.button .left,
.button .right {
    position: absolute;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
}

.button .left {
    left: 0;
}

.button .right {
    right: 0;
}

.button .text {
    overflow: hidden;
    white-space: nowrap;
    background-repeat: repeat;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    .pagination .move {
        float: none !important;
    }

    .pagination .move li {
        margin-left: 0;
        margin-right: 35px;
    }

    form.message * {
        float: none;
    }
    
    form.message [type="text"] {
        margin-right: 0;
    }
    
    form.message [name="email"] {
        margin-top: 21px;
    }

    form.message p {
        margin-top: 12px;
    }
}

/* =====[ HEADER ]=============================================================================== */

#header {
    position: relative;
    padding: 70px 0 97px;
    color: #fff;
    background: #07090e;
    background: linear-gradient(#181e2d, #000);
    background: -webkit-linear-gradient(#181e2d, #000);
    background: -moz-linear-gradient(#181e2d, #000);
    background: -o-linear-gradient(#181e2d, #000);
    background: -ms-linear-gradient(#181e2d, #000);
    box-shadow: 0 1px 99px rgba(0, 0, 0, 0.15);
}

/* -----[ NAVIGATION ]--------------------------------------------------------------------------- */

#header .navigation {
   float: right;
   margin: 1px 10px 0 0;
}

#header .navigation li {
   margin-right: 35px;
   display: inline-block;
   line-height: 23px;
}

#header .navigation li:last-child {
    margin-right: 0;
}

#header .navigation a {
    font-size: 16px;
    color: #ddd;
}

#header .navigation a:hover {
    color: #fff;
}

#header .navigation li.active a {
   font-family: "roboto_medium";
   color: #fff;
}

#header .navigation li.active a:hover {
    text-decoration: none;
    cursor: default;
}

/* -----[ CONTENT ]------------------------------------------------------------------------------ */

#header .logo {
    font-family: "roboto_light";
    font-size: 21px;
    text-transform: uppercase;
    color: #fff;
}

#header h1 {
    margin-top: 107px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

#header h2 {
    margin-top: 35px;
}

#header h1,
#header h2 {
    text-align: center;
}

/* -----[ BUTTONS ]------------------------------------------------------------------------------ */

#header .buttons {
    margin-top: 62px;
    text-align: center;
}

#header .buttons .button {
    position: relative;
    margin: 10px 6px 0;
    border: 5px solid #0d0d0d;
    padding: 16px 40px;
    line-height: 18px;
    font-family: "roboto_medium";
    font-size: 15px;
    color: #fff;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    box-shadow: 0 1px 0 #2b2b2b;
    -webkit-box-shadow: 0 1px 0 #2b2b2b;
    -moz-box-shadow: 0 1px 0 #2b2b2b;
    -o-box-shadow: 0 1px 0 #2b2b2b;
    -ms-box-shadow: 0 1px 0 #2b2b2b;
}

#header .buttons .button span {
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
}

#header .buttons .button .text {
    position: relative;
    z-index: 2;
}

#header .buttons .button .normal,
#header .buttons .button .hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#header .buttons .button .hover {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
}

#header .buttons .button:hover .hover {
    opacity: 1;
}

#header .buttons .button.blue .normal {
    background: #142f46;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDI2LDYwLDkzLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjUsNDgsNjcsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
    background: linear-gradient(#1a3c5d, #193043);
    background: -webkit-linear-gradient(#1a3c5d, #193043);
    background: -moz-linear-gradient(#1a3c5d, #193043);
    background: -o-linear-gradient(#1a3c5d, #193043);
    background: -ms-linear-gradient(#1a3c5d, #193043);
    box-shadow: 0 1px 0 #245381 inset;
    -webkit-box-shadow: 0 1px 0 #245381 inset;
    -moz-box-shadow: 0 1px 0 #245381 inset;
    -o-box-shadow: 0 1px 0 #245381 inset;
    -ms-box-shadow: 0 1px 0 #245381 inset;
}

#header .buttons .button.blue .hover {
    background: #142e44;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDIwLDM4LDU0LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMjEsNDksNzYsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
    background: linear-gradient(#142636, #15314c);
    background: -webkit-linear-gradient(#142636, #15314c);
    background: -moz-linear-gradient(#142636, #15314c);
    background: -o-linear-gradient(#142636, #15314c);
    background: -ms-linear-gradient(#142636, #15314c);
    box-shadow: 0 -1px 0 #193b5b inset;
    -webkit-box-shadow: 0 -1px 0 #193b5b inset;
    -moz-box-shadow: 0 -1px 0 #193b5b inset;
    -o-box-shadow: 0 -1px 0 #193b5b inset;
    -ms-box-shadow: 0 -1px 0 #193b5b inset;
}

#header .buttons .button.gray .normal {
    background: #303030;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDU4LDU4LDU4LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoNDgsNDgsNDgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
    background: linear-gradient(#3a3a3a, #303030);
    background: -webkit-linear-gradient(#3a3a3a, #303030);
    background: -moz-linear-gradient(#3a3a3a, #303030);
    background: -o-linear-gradient(#3a3a3a, #303030);
    background: -ms-linear-gradient(#3a3a3a, #303030);
    box-shadow: 0 1px 0 #4f4f4f inset;
    -webkit-box-shadow: 0 1px 0 #4f4f4f inset;
    -moz-box-shadow: 0 1px 0 #4f4f4f inset;
    -o-box-shadow: 0 1px 0 #4f4f4f inset;
    -ms-box-shadow: 0 1px 0 #4f4f4f inset;
}

#header .buttons .button.gray .hover {
    background: #2b2b2b;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDM3LDM3LDM3LDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoNDIsNDIsNDIsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);
    background: linear-gradient(#252525, #2a2a2a);
    background: -webkit-linear-gradient(#252525, #2a2a2a);
    background: -moz-linear-gradient(#252525, #2a2a2a);
    background: -o-linear-gradient(#252525, #2a2a2a);
    background: -ms-linear-gradient(#252525, #2a2a2a);
    box-shadow: 0 -1px 0 #2e2e2e inset;
    -webkit-box-shadow: 0 -1px 0 #2e2e2e inset;
    -moz-box-shadow: 0 -1px 0 #2e2e2e inset;
    -o-box-shadow: 0 -1px 0 #2e2e2e inset;
    -ms-box-shadow: 0 -1px 0 #2e2e2e inset;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    #header {
        padding: 20px 0 70px;
    }
    
    #header .navigation {
        float: none;
        margin-top: 20px;
    }

    #header h1,
    #header .buttons {
        margin-top: 60px;
    }
}

/* =====[ CONTENT ]============================================================================== */

.content h1,
.content h2,
.content h3 {
    color: #0a0a0a;
}

.content ul.list li {
    padding-left: 12px;
    background: url(../img/bullet.png) no-repeat left 5px;
}

.content ul.list li + li {
    margin-top: 25px;
}

/* =====[ FOOTER ]=============================================================================== */

#footer {
    border-top: 1px solid #e2e2e2;
    padding: 52px 0 100px;
    footer: #404040;
}

#footer,
#footer a {
    font-size: 13px;
}

#footer .grids {
    padding-bottom: 5px;
}

#footer [class^="grid_"] {
    margin-top: 20px;
}

#footer .twitter {
    color: #44abc8;
}

#footer .twitter:hover {
    color: #296778;
}

#footer .dribbble {
    color: #dc6f84;
}

#footer .dribbble:hover {
    color: #84434F;
}

#footer .facebook {
    color: #23548a;
}

#footer .facebook:hover {
    color: #122A45;
}

#footer .copyright {
    text-align: right;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    #footer {
        padding: 22px 0 50px;
    }
    
    #footer .copyright {
        text-align: left;
    }
}

/* =====[ HOMEPAGE ]============================================================================= */

/* -----[ HEADER ]------------------------------------------------------------------------------- */

#homepage #header {
    margin-bottom: 40px;
    padding-bottom: 130px;
}

#homepage #header .work {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(../data/homepage/header.png) repeat;
}

#homepage #header h1 {
    margin-top: 171px;
    font-size: 46px;
}

/* -----[ INFO ]--------------------------------------------------------------------------------- */

#homepage .content.info {
    padding-bottom: 64px;
}

#homepage .content.info h2 {
    margin: 38px 0 35px;
}

#homepage .content.info ul {
    padding-top: 7px;
}

/* -----[ SAMPLES ]------------------------------------------------------------------------------ */

#homepage .content.samples {
    border-top: 1px solid #e2e2e2;
    padding: 49px 0 53px;
    background-color: #f6f6f6;
}

#homepage .content.samples h3 {
    margin-top: 12px;
}

#homepage .content.samples .more {
    float: right;
    display: inline-block;
    position: relative;
    margin-right: 11px;
    border: 1px solid #c6c6c6;
    padding: 14px 26px;
    font-size: 13px;
    text-transform: uppercase;
    color: #363636;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    box-shadow: 0 2px 0 #E5E5E5;
    -webkit-box-shadow: 0 2px 0 #E5E5E5;
    -moz-box-shadow: 0 2px 0 #E5E5E5;
    -o-box-shadow: 0 2px 0 #E5E5E5;
    -ms-box-shadow: 0 2px 0 #E5E5E5;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

#homepage .content.samples .more:hover {
    top: 1px;
    box-shadow: 0 1px 3px #e8e8e8 inset;
    -webkit-box-shadow: 0 1px 3px #e8e8e8 inset;
    -moz-box-shadow: 0 1px 3px #e8e8e8 inset;
    -o-box-shadow: 0 1px 3px #e8e8e8 inset;
    -ms-box-shadow: 0 1px 3px #e8e8e8 inset;
}

#homepage .content.samples ul {
    overflow: hidden;
    margin-top: 36px;
    list-style: none;
}

#homepage .content.samples li {
    position: relative;
    float: left;
    margin: 1px 1px 0 0;
    width: 24.8%;
}

#homepage .content.samples li img {
    width: 100%;
    vertical-align: top;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    #homepage #header {    
        margin-bottom: 20px;
    }
    
    #homepage #header h1 {
        margin-top: 60px;
    }

    #homepage .content.samples .more {
        float: none;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 541px) {
    #homepage .content.samples li {
        width: 49.5%;
    }
}

/* =====[ ABOUT ]================================================================================ */

#about .photos {
    height: 160px;
    background: url(../data/about/team.jpg);
}

#about img {
    box-shadow: 0 1px 2px #ddd;
    -moz-box-shadow: 0 1px 2px #ddd;
    -webkit-box-shadow: 0 1px 2px #ddd;
    -o-box-shadow: 0 1px 2px #ddd;
    -ms-box-shadow: 0 1px 2px #ddd;
}

/* -----[ INFO ]--------------------------------------------------------------------------------- */

#about .content.info {
    padding: 73px 0 68px;
}

#about .content.info h2 {
    font-size: 32px;
}

#about .content.info p {
    margin-top: 36px;
    line-height: 28px;
}

#about .content.info img {
    margin-top: 59px;
    width: 100%;
}

/* -----[ TEAM ]--------------------------------------------------------------------------------- */

#about .content.team {
    border-top: 1px solid #e2e2e2;
    padding: 55px 0 70px;
    background-color: #f6f6f6;
}

#about .content.team ul {
    overflow: hidden;
}

#about .content.team ul + ul { 
    margin-top: 61px;
}

#about .content.team li,
#about .content.team img {
    float: left;
}

#about .content.team li {
    width: 47%;
}

#about .content.team li + li {
    margin-left: 6%;
}

#about .content.team img {
    margin-right: 31px;
    vertical-align: top;
}

#about .content.team h2 {
    margin-bottom: 48px;
}

#about .content.team h3 {
    font-family: "roboto_regular";
    font-size: 20px;
}

#about .content.team h4 {
    margin-top: 7px;
    font-size: 13px;
    text-transform: uppercase;
    color: #848383;
}

#about .content.team p {
    margin-top: 12px;
    line-height: 23px;
    font-size: 13px;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    #about .content.team li {
        float: none;
        overflow: hidden;
        width: 100%;
    }

    #about .content.team li + li {
        margin: 61px 0 0;
    }
}

/* =====[ PORTFOLIO GRID ]======================================================================= */

/* -----[ MENU ]--------------------------------------------------------------------------------- */

#grid .menu {
    border-bottom: 1px solid #e2e2e2;
    padding: 41px 0 33px;
    background-color: #f6f6f6;
}

#grid .menu .category {
    display: inline-block;
    overflow: hidden;
    margin-right: 110px;
}

#grid .menu .category li {
    display: inline-block;
    margin-right: 31px;
    line-height: 25px;
}

#grid .menu .category a {
    font-family: "roboto_light";
    font-size: 18px;
    color: #0a0a0a;
}

#grid .menu .category a:hover {
    color: #000;
}

#grid .menu .category li.active a {
    font-family: "roboto_regular";
}

#grid .menu .category li.active a:hover {
    text-decoration: none;
    cursor: default;
    color: #0a0a0a;
}

#grid .menu .size {
    overflow: hidden;
    position: absolute;
    top: 3px;
    right: 31px;
}

#grid .menu .size li {
    float: left;
}

#grid .menu .size li + li {
    margin-left: 27px;
}

#grid .menu .size a {
    display: block;
    width: 22px;
    height: 22px;
    background-image: url(../img/grid.png);
}

#grid .menu .size a.active {
    cursor: default;
}

#grid .menu .size .small.active,
#grid .menu .size .small:hover {
    background-position: -22px 0;
}

#grid .menu .size .big {
    background-position: -44px 0;
}

#grid .menu .size .big.active,
#grid .menu .size .big:hover {
    background-position: -66px 0;
}

/* -----[ PREVIEW ]------------------------------------------------------------------------------ */

#grid .preview {
    overflow: hidden;
    margin-top: 73px;
}

#grid .preview .inner {
    position: relative;
    height: 100%;
}

#grid .preview a {
    display: block;
    position: absolute;
    z-index: 1;
    opacity: 1;
    transition:
        top 0.5s ease,
        left 0.5s ease,
        width 0.5s ease,
        opacity 0.5s ease;
    -webkit-transition:
        top 0.5s ease,
        left 0.5s ease,
        width 0.5s ease,
        opacity 0.5s ease;
    -moz-transition:
        top 0.5s ease,
        left 0.5s ease,
        width 0.5s ease,
        opacity 0.5s ease;
    -o-transition:
        top 0.5s ease,
        left 0.5s ease,
        width 0.5s ease,
        opacity 0.5s ease;
    -ms-transition:
        top 0.5s ease,
        left 0.5s ease,
        width 0.5s ease,
        opacity 0.5s ease;
}

#grid .preview img {
    vertical-align: top;
    width: 100%;
}

#grid .preview .caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    opacity: 0;
    background: url(../img/preview.png) no-repeat center center rgba(12, 18, 28, 0.8);
    transition: opacity 0.35s ease;
    -webkit-transition: opacity 0.35s ease;
    -moz-transition: opacity 0.35s ease;
    -o-transition: opacity 0.35s ease;
    -ms-transition: opacity 0.35s ease;
}

#grid:hover .preview .caption {
    opacity: 0;
}

#grid:hover .preview a:hover .caption {
    opacity: 1;
}

#grid .preview .caption .center {
    display: table;
    width: 100%;
    height: 100%;
}

#grid .preview .caption .contents {
    display: table-cell;
    vertical-align: middle;
    padding: 21px;
}

#grid .preview .caption h2 {
    line-height: 28px;
    font-family: "roboto_regular";
    font-size: 16px;
    text-align: center;
}

#grid .preview .caption p {
    margin-top: 18px;
    line-height: 22px;
    font-family: "roboto_light";
    font-size: 13px;
}

#grid .preview[data-size="small"] a {
    width: 234px;
}

#grid .preview[data-size="small"] a:nth-child(1),
#grid .preview[data-size="small"] a:nth-child(2),
#grid .preview[data-size="small"] a:nth-child(3),
#grid .preview[data-size="small"] a:nth-child(4) {
    top: 0;
}

#grid .preview[data-size="small"] a:nth-child(5),
#grid .preview[data-size="small"] a:nth-child(6),
#grid .preview[data-size="small"] a:nth-child(7),
#grid .preview[data-size="small"] a:nth-child(8) {
    top: 235px;
}

#grid .preview[data-size="small"] a:nth-child(9),
#grid .preview[data-size="small"] a:nth-child(10),
#grid .preview[data-size="small"] a:nth-child(11),
#grid .preview[data-size="small"] a:nth-child(12) {
    top: 470px;
}

#grid .preview[data-size="small"] a:nth-child(13),
#grid .preview[data-size="small"] a:nth-child(14),
#grid .preview[data-size="small"] a:nth-child(15),
#grid .preview[data-size="small"] a:nth-child(16) {
    top: 705px;
}

#grid .preview[data-size="small"] a:nth-child(1),
#grid .preview[data-size="small"] a:nth-child(5),
#grid .preview[data-size="small"] a:nth-child(9),
#grid .preview[data-size="small"] a:nth-child(13) {
    left: 0;
}

#grid .preview[data-size="small"] a:nth-child(2),
#grid .preview[data-size="small"] a:nth-child(6),
#grid .preview[data-size="small"] a:nth-child(10),
#grid .preview[data-size="small"] a:nth-child(14) {
    left: 235px;
}

#grid .preview[data-size="small"] a:nth-child(3),
#grid .preview[data-size="small"] a:nth-child(7),
#grid .preview[data-size="small"] a:nth-child(11),
#grid .preview[data-size="small"] a:nth-child(15) {
    left: 470px;
}

#grid .preview[data-size="small"] a:nth-child(4),
#grid .preview[data-size="small"] a:nth-child(8),
#grid .preview[data-size="small"] a:nth-child(12),
#grid .preview[data-size="small"] a:nth-child(16) {
    left: 705px;
}

#grid .preview[data-size="big"] a {
    width: 312px;
}

#grid .preview[data-size="big"] a:nth-child(1),
#grid .preview[data-size="big"] a:nth-child(2),
#grid .preview[data-size="big"] a:nth-child(3) {
    top: 0;
}

#grid .preview[data-size="big"] a:nth-child(4),
#grid .preview[data-size="big"] a:nth-child(5),
#grid .preview[data-size="big"] a:nth-child(6) {
    top: 313px;
}

#grid .preview[data-size="big"] a:nth-child(7),
#grid .preview[data-size="big"] a:nth-child(8),
#grid .preview[data-size="big"] a:nth-child(9) {
    top: 626px;
}

#grid .preview[data-size="big"] a:nth-child(1),
#grid .preview[data-size="big"] a:nth-child(4),
#grid .preview[data-size="big"] a:nth-child(7) {
    left: 0;
}

#grid .preview[data-size="big"] a:nth-child(2),
#grid .preview[data-size="big"] a:nth-child(5),
#grid .preview[data-size="big"] a:nth-child(8) {
    left: 313px;
}

#grid .preview[data-size="big"] a:nth-child(3),
#grid .preview[data-size="big"] a:nth-child(6),
#grid .preview[data-size="big"] a:nth-child(9) {
    left: 626px;
}

#grid .preview[data-size="big"] a:nth-child(10),
#grid .preview[data-size="big"] a:nth-child(11),
#grid .preview[data-size="big"] a:nth-child(12),
#grid .preview[data-size="big"] a:nth-child(13),
#grid .preview[data-size="big"] a:nth-child(14),
#grid .preview[data-size="big"] a:nth-child(15),
#grid .preview[data-size="big"] a:nth-child(16) {
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 0;
}

/* -----[ PAGINATION ]--------------------------------------------------------------------------- */

#grid .pagination {
    padding: 45px 0 77px;
}

#grid .pagination .move {
    float: right;
    margin-right: 10px;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media only screen and (max-width: 969px) {
    #grid .preview[data-size="small"] a {
        width: 24.7%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(5),
    #grid .preview[data-size="small"] a:nth-child(6),
    #grid .preview[data-size="small"] a:nth-child(7),
    #grid .preview[data-size="small"] a:nth-child(8) {
        top: 24.8%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(9),
    #grid .preview[data-size="small"] a:nth-child(10),
    #grid .preview[data-size="small"] a:nth-child(11),
    #grid .preview[data-size="small"] a:nth-child(12) {
        top: 49.6%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(13),
    #grid .preview[data-size="small"] a:nth-child(14),
    #grid .preview[data-size="small"] a:nth-child(15),
    #grid .preview[data-size="small"] a:nth-child(16) {
        top: 74.4%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(2),
    #grid .preview[data-size="small"] a:nth-child(6),
    #grid .preview[data-size="small"] a:nth-child(10),
    #grid .preview[data-size="small"] a:nth-child(14) {
        left: 24.8%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(3),
    #grid .preview[data-size="small"] a:nth-child(7),
    #grid .preview[data-size="small"] a:nth-child(11),
    #grid .preview[data-size="small"] a:nth-child(15) {
        left: 49.6%;
    }
    
    #grid .preview[data-size="small"] a:nth-child(4),
    #grid .preview[data-size="small"] a:nth-child(8),
    #grid .preview[data-size="small"] a:nth-child(12),
    #grid .preview[data-size="small"] a:nth-child(16) {
        left: 74.4%;
    }
    
    #grid .preview[data-size="big"] a {
        width: 32.9%;
    }

    #grid .preview[data-size="big"] a:nth-child(4),
    #grid .preview[data-size="big"] a:nth-child(5),
    #grid .preview[data-size="big"] a:nth-child(6) {
        top: 33%;
    }
    
    #grid .preview[data-size="big"] a:nth-child(7),
    #grid .preview[data-size="big"] a:nth-child(8),
    #grid .preview[data-size="big"] a:nth-child(9) {
        top: 66%;
    }
    
    #grid .preview[data-size="big"] a:nth-child(2),
    #grid .preview[data-size="big"] a:nth-child(5),
    #grid .preview[data-size="big"] a:nth-child(8) {
        left: 33%;
    }
    
    #grid .preview[data-size="big"] a:nth-child(3),
    #grid .preview[data-size="big"] a:nth-child(6),
    #grid .preview[data-size="big"] a:nth-child(9) {
        left: 66%;
    }
}

@media handheld, only screen and (max-width: 767px) {
    #grid .preview .caption .contents {
        padding: 5px;
    }
    
    #grid .preview .caption h2 {
        font-size: 11px;
        line-height: 18px;
    }
    
    #grid .preview .caption p {
        display: none;
    }
}

/* =====[ PORTFOLIO ITEM ]======================================================================= */

#item #header {
    margin-bottom: 122px;
    padding-bottom: 0;
    height: 504px;
}

#item #header .buy {
    position: absolute;
    bottom: -13.5%;
    width: 100%;
    text-align: center;
}

#item #footer {
    padding-top: 34px;
}

/* -----[ SMALL SLIDER ]------------------------------------------------------------------------- */

#item #header .slider {
    position: absolute;
    bottom: -8.7%;
    width: 100%;
    text-align: center;
}

#item #header .slider .window {    
    display: inline-block;
    position: relative;
    width: 70%;
    max-width: 582px;
}

#item #header .slider img {
    width: 100%;
    vertical-align: top;
}

#item #header .slider .arrow {
    position: absolute;
    top: 0;
    top: 42%;
    max-width: 88px;
    width: 16%;
    cursor: pointer;
    transition: transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    -ms-transition: -ms-transform 0.3s ease;
}

#item #header .slider .arrow:hover {
    transform: scale(1.07);
    -webkit-transform: scale(1.07);
    -moz-transform: scale(1.07);
    -o-transform: scale(1.07);
    -ms-transform: scale(1.07);
}

#item #header .slider .arrow.left {
    left: -30.5%;
}

#item #header .slider .arrow.right {
    right: -30.5%;
}

#item #header .slider .images {
    position: relative;
    background-color: #fff;
}

#item #header .slider .images img {
    max-height: 320px;
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
}

#item #header .slider .images img.active {
    opacity: 1;
}

#item #header .slider .images img + img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#item #header .slider .bottom {
    margin: -6.7% -8.5% -3%;
    width: 117%;
}

/* -----[ DOWNLOAD BUTTON ]---------------------------------------------------------------------- */

#item .button.download {
    padding: 0 37px;
    height: 58px;
}

#item .button.download span {
    background-image: url(../img/download.png);
}

#item .button.download .text {
    padding: 0 53px 7px 14px;
    line-height: 51px;
    font-family: museo;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-position: 0 -58px;
}

#item .button.download .left,
#item .button.download .right {
    width: 37px;
}

#item .button.download .left {
    background-position: 0 0;
}

#item .button.download .right {
    background-position: -37px 0;
}

#item .button.download .arrow {
    position: absolute;
    top: 22px;
    right: 46px;
    width: 26px;
    height: 9px;
    background-position: 0 -116px;
}

/* -----[ CONTENT ]------------------------------------------------------------------------------ */

#item .content h2 {
    margin-bottom: 31px;
}

#item .content .online {
    float: right;
    display: inline-block;
    position: relative;
    margin: 44px 10px 0 0;
    border: 1px solid #c6c6c6;
    padding: 20px 39px;
    font-size: 14px;
    text-transform: uppercase;
    color: #363636;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    box-shadow: 0 2px 0 #E5E5E5;
    -webkit-box-shadow: 0 2px 0 #E5E5E5;
    -moz-box-shadow: 0 2px 0 #E5E5E5;
    -o-box-shadow: 0 2px 0 #E5E5E5;
    -ms-box-shadow: 0 2px 0 #E5E5E5;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

#item .content .online:hover {
    top: 1px;
    box-shadow: 0 1px 3px #e8e8e8 inset;
    -webkit-box-shadow: 0 1px 3px #e8e8e8 inset;
    -moz-box-shadow: 0 1px 3px #e8e8e8 inset;
    -o-box-shadow: 0 1px 3px #e8e8e8 inset;
    -ms-box-shadow: 0 1px 3px #e8e8e8 inset;
}

#item .content .features {
    margin-top: 49px;
}

#item .content .features p {
    margin-top: 26px;
}

#item .content .features .grids {
    margin-top: 38px;
}

#item .content .features [class^=grid_] {
    margin-top: 25px;
}

#item .content .buy {
    margin-top: 76px;
    text-align: center;
}

/* -----[ BIG SLIDER ]--------------------------------------------------------------------------- */

#item .content .slider {
    margin-top: 51px;
}

#item .content .slider h3 {
    position: relative;
    padding: 0 40px;
    height: 20px;
    line-height: 20px;
    text-align: center;
}

#item .content .slider h3 span {
    background-image: url(../img/slider_big.png);
}

#item .content .slider h3 .text {
    display: block;
    overflow: hidden;
    height: 20px;
    font-family: "Arial", "DejaVu Sans", "Liberation Sans", "Freesans", "sans-serif";
    font-size: 10px;
    color: #666;
    background-position: 0 -20px;
    background-repeat: repeat;
}

#item .content .slider h3 .left,
#item .content .slider h3 .right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
}

#item .content .slider h3 .left {
    left: 0;
}

#item .content .slider h3 .right {
    right: 0;
    background-position: 0 -40px;
}

#item .content .slider .images {
    position: relative;
    border: 1px solid #cccccc;
    border-top: none;
}

#item .content .slider .images img {
    vertical-align: top;
    width: 100%;
}

#item .content .slider .images img {
    opacity: 0;
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
}

#item .content .slider .images img.active {
    opacity: 1;
}

#item .content .slider .images img + img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#item .content .slider .switch {
    margin-top: 25px;
    text-align: center;
}

#item .content .slider .switch ul {
    display: inline-block;
    overflow: hidden;
    height: 8px;
}

#item .content .slider .switch li {
    float: left;
    width: 8px;
    height: 8px;
    background-image: url(../img/slider_big.png);
    background-position: -8px -60px;
    cursor: pointer;
}

#item .content .slider .switch li.active {
    background-position: 0 -60px;
    cursor: default;
}

#item .content .slider .switch li + li {
    margin-left: 5px;
}

/* -----[ SIMILAR PROJECTS ]--------------------------------------------------------------------- */

#item .content.similar {
    margin-top: 90px;
    border-top: 1px solid #e2e2e2;
    padding: 61px 0 74px;
    background-color: #f6f6f6;
}

#item .content.similar ul {
    overflow: hidden;
    margin-top: 36px;
    list-style: none;
}

#item .content.similar li {
    position: relative;
    float: left;
    margin: 1px 1px 0 0;
    width: 24.8%;
}

#item .content.similar li img {
    width: 100%;
    vertical-align: top;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media only screen and (max-width: 969px) {
    #item #header .slider .arrow.left {
        left: -28%;
    }
    
    #item #header .slider .arrow.right {
        right: -28%;
    }
}

@media only screen and (max-width: 929px) {
    #item #header .slider .arrow.left {
        left: -24.5%;
    }
    
    #item #header .slider .arrow.right {
        right: -24.5%;
    }
}

@media only screen and (max-width: 909px) {
    #item #header .slider .arrow.left {
        left: -21%;
    }
    
    #item #header .slider .arrow.right {
        right: -21%;
    }
}

@media handheld, only screen and (max-width: 767px) {
    #item .content .online {
        float: none;
    }

    #item .content.similar ul {
        margin-top: 0;
    }

    #item #header .slider .arrow.left {
        left: -20%;
    }
    
    #item #header .slider .arrow.right {
        right: -20%;
    }
}

@media only screen and (max-width: 541px) {
    #item .content.similar li {
        width: 49.5%;
    }
}

/* =====[ BLOG ]================================================================================= */

#blog .content > .wrapper > .grids > [class^="grid_"] {
    padding-bottom: 69px;
}

#blog .content {
    margin-top: 81px;
}

#blog img {
    box-shadow: 0 1px 2px #ddd;
    -moz-box-shadow: 0 1px 2px #ddd;
    -webkit-box-shadow: 0 1px 2px #ddd;
    -o-box-shadow: 0 1px 2px #ddd;
    -ms-box-shadow: 0 1px 2px #ddd;
}

#blog .post {
    padding: 0 28px 0 1px;
}

#blog .pagination {
    padding: 63px 28px 0 1px;
}

/* -----[ POSTS ]-------------------------------------------------------------------------------- */

#blog .post + .post {
    margin-top: 93px;
}

#blog .post .info {
    margin-top: 16px;
    color: #5a5a5a;
}

#blog .post .info,
#blog .post .info .category {
    font-size: 14px;
}

#blog .post .info .divider {
    margin: 0 7px;
    font-family: "roboto_light";
}

#blog .post .info .divider:after {
    content: "|";
}

#blog .post .image {
    display: /*inline-*/block;
    margin-top: 41px;
}

#blog .post .image img {
    width: 100%;
}

#blog .post .more {
    display: inline-block;
    margin-top: 30px;
}

#blog .post .category,
#blog .post .more,
#blog .post .postcontent a {
    color: #142b5d;
}

#blog .post .category:hover,
#blog .post .more:hover,
#blog .post .postcontent a:hover {
    color: #0A162E;
}

#blog .post h3 {
    font-size: 25px;
    text-transform: none;
}

#blog .postcontent {
    margin-top: 32px;
}

#blog .postcontent > * + * {
    margin-top: 26px;
}

#blog .postcontent h3 {
    margin: 58px 0 36px;
}

#blog .postcontent ul {
    margin: 27px 0 30px 16px;
}

#blog .postcontent ul li {
    padding-left: 31px;
    line-height: 27px;
    background: url(../img/bullet.png) no-repeat left 12px;
}

#blog .postcontent ul li + li {
    margin-top: 9px;
}

/* -----[ COMMENTS ]--------------------------------------------------------------------------------- */

#blog .comments {
    margin-top: 63px;
    border-top: 1px solid #e0e0e0;
    padding-top: 63px;
}

#blog .comments h3 {
    margin-bottom: 53px;
    text-transform: none;
}

#blog .comment {
    overflow: hidden;
}

#blog .comment + .comment {
    margin-top: 60px;
}

#blog .comment .avatar {
    float: left;
    margin-right: 26px;
}

#blog .comment .info {
    margin-bottom: 11px;
    line-height: 15px;
}

#blog .comment .name {
    margin-right: 19px;
    font-size: 18px;
    color: #414141;
}

#blog .comment .name:hover {
    color: #000;
}

#blog .comment .date {
    font-size: 13px;
    color: #8d8d8d;
}

#blog .comment p {
    line-height: 22px;
}

#blog .message {
    margin: 78px 0 24px;
}

#blog .message [type="text"] {
    width: 29.4%;
}

#blog .message [name="name"] {
    margin-right: 3%;
}

#blog .message textarea {
    width: 89.2%;
}

/* -----[ COLUMN ]------------------------------------------------------------------------------- */

#blog .column {
    left: 10px;
    padding-top: 5px;
}

#blog .column .search {
    display: inline-block;
    position: relative;
    margin-bottom: 47px;
}

#blog .column .search [type="text"] {
    border: 1px solid #dedede;
    padding: 16px 50px 12px 20px;
    width: 148px;
    font-size: 14px;
    color: #464646;
    background-color: #fff;
    box-shadow: 0 2px 0 #f2f2f2 inset;
    -webkit-box-shadow: 0 2px 0 #f2f2f2 inset;
    -moz-box-shadow: 0 2px 0 #f2f2f2 inset;
    -o-box-shadow: 0 2px 0 #f2f2f2 inset;
    -ms-box-shadow: 0 2px 0 #f2f2f2 inset;
}

#blog .column .search [type="submit"] {
    position: absolute;
    top: 16px;
    right: 18px;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    background: url(../img/search.png);
    cursor: pointer;
}

#blog .column .categories {
    margin: 40px 0 67px;
    line-height: 10px;
}

#blog .column .categories a:hover {
    color: #000;
}

#blog .column .categories .active a:hover {
    color: #464646;
}

#blog .column .categories .active a {
    font-family: "roboto_medium";
    cursor: default;
}

#blog .column .flickr {
    margin-top: 41px;
}

#blog .column .flickr img {
    margin: 0 6px 4px 0;
    width: 69px;
    height: 69px;
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media only screen and (max-width: 969px) {
    #blog .column .search [type="text"] {
        width: 138px;
    }
}

@media only screen and (max-width: 959px) {
    #blog .column .search [type="text"] {
        width: 128px;
    }
}

@media only screen and (max-width: 949px) {
    #blog .column .search [type="text"] {
        width: 118px;
    }
}

@media only screen and (max-width: 939px) {
    #blog .column .search [type="text"] {
        width: 108px;
    }
}

@media only screen and (max-width: 939px) {
    #blog .column .search [type="text"] {
        width: 98px;
    }
}

@media handheld, only screen and (max-width: 767px) {
    #blog .post {
        padding: 0;
    }
    
    #blog .message [type="text"] {
        width: 85%;
    }
    
    #blog .message textarea {
        width: 85.4%;
    }
    
    #blog .pagination {
        padding: 63px 0 0;
    }
}

/* =====[ CONTACT ]============================================================================== */

#contact .headquarters {
    overflow: hidden;
    margin: 0;
    border: none;
    width: 100%;
    height: 412px;
    background-color: #a9a9a9;
}

#contact .content {
    margin: 61px 0 103px;
}

/* -----[ CONTACTS ]----------------------------------------------------------------------------- */

#contact .address {
    margin-top: 44px;
    font-size: 14px;
    color: #8d8e8e;
}

#contact .contacts {
    margin-top: 25px;
    line-height: 27px;
    font-size: 15px;
    color: #575757;
}

/* -----[ CONTACT FORM ]------------------------------------------------------------------------- */

#contact .contact {
    padding-top: 6px;
}

#contact .message [type="text"] {
    width: 39.4%;
}

#contact .message [name="name"] {
    margin-right: 4.7%;
}

#contact .message textarea {
    width: 92%;
}

@media only screen and (max-width: 969px) {
    #contact .message form * {
        float: none;
    }
    
    #contact .message [type="text"] {
        margin-right: 0;
        width: 89.6%;
    }
    
    #contact .message [name="email"] {
        margin-top: 21px;
    }
    
    #contact .message textarea {
        width: 90%;
    }
}

/* -----[ RESPONSIVE LAYOUT ]-------------------------------------------------------------------- */

@media handheld, only screen and (max-width: 767px) {
    #contact .contact {
        padding-top: 0;
        margin-top: 45px;
    }
    
    #contact .message [type="text"] {
        width: 85%;
    }
    
    #contact .message textarea {
        width: 85.3%;
    }
}