body {
        margin-bottom: 0px;
        background-color: #FFF;
        color: #444;
        font-size: 12px;
        line-height: 20px;
    }
    
    h1 {
        margin: 10px 0px;
        font-size: 38px;
        line-height: 44px;
        font-weight: 700;
    }
    
    h2 {
        margin: 10px 0px;
        font-size: 32px;
        line-height: 36px;
        font-weight: 700;
    }
    
    h3 {
        margin: 10px 0px 1px;
        font-size: 21px;
        line-height: 30px;
        font-weight: 400;
    }
    
    h4 {
        margin: 10px 0px;
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
    }
    
    h5 {
        margin: 10px 0px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700;
    }
    
    h6 {
        margin: 10px 0px;
        font-size: 12px;
        line-height: 18px;
        font-weight: 700;
    }
    
    p {
        margin-bottom: 26px;
        color: #969696;
        font-size: 25px;
        line-height: 1.6em;
        font-weight: 300;
    }
    
    img {
        height: auto;
    }
    
    .button {
        display: inline-block;
        margin-right: 8px;
        margin-left: 8px;
        padding: 14px 29px;
        border-radius: 5px;
        background-color: #6d7280;
        -webkit-transition: background-color 300ms ease;
        -o-transition: background-color 300ms ease;
        transition: background-color 300ms ease;
        color: white;
        font-size: 14px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    .button:hover {
        background-color: #848a9c;
    }
    
    .section {
        padding: 20px;
    }
    
    .nav-link {
        margin-right: 11px;
        margin-left: 11px;
        -webkit-transition: color 300ms ease, background-color 300ms ease;
        -o-transition: color 300ms ease, background-color 300ms ease;
        transition: color 300ms ease, background-color 300ms ease;
        /*font-family: Montserrat, sans-serif;*/
        color: rgba(255, 255, 255, 0.81);
        font-size: 14px;
        text-decoration: none;
        text-transform: uppercase;
    }
    
    .nav-link:hover {
        color: white;
    }
    
    .by-section {
        text-align: left;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        margin-right: 7px;
        margin-left: 4px;
        padding-top: 9px;
        border-radius: 40px;
        background-color: #596073;
        -webkit-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        transition: all 200ms ease;
        text-align: center;
    }
    
    .nav-bar {
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        z-index: 999;
        padding-right: 20px;
        padding-left: 20px;
    }
    
    .wrapper {
        width: 100%;
        height: 100%;
        background-color: #FFF;
    }
    
    .wrapper.inner {
        padding-bottom: 0px;
    }
    
    .header {
        height: 130px;
        background-color: #FFF;
    }
    
    .home-slider {
        overflow-x: hidden;
        overflow-y: hidden;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
    
    .description-block {
        position: absolute;
        bottom: 52px;
        left: 20px;
        width: 370px;
    }
    
    .title-home {
        display: inline-block;
        padding-bottom: 0px;
        font-size: 27px;
        font-weight: 500;
        line-height: 32px;
        color: #444;
    }
    
    .description-home {
        font-size: 17px;
        line-height: 1.5em;
        font-weight: 300;
        color: #444;
    }
    
    .title-home,
    .description-home,
    .description-block a {
        -webkit-transition: all 300ms ease !important;
        -o-transition: all 300ms ease !important;
        transition: all 300ms ease !important;
    }
    
    .title-home.background--dark {
        color: #FDFDF7;
        border-color: #FDFDF7;
    }
    
    .description-home.background--dark {
        color: rgba(253, 253, 247, 0.59);
    }
    /* */
    
    .description-block {
        position: absolute;
        bottom: 48px;
        left: 20px;
        width: 411px;
        -webkit-transition: all 300ms ease !important;
        -o-transition: all 300ms ease !important;
        transition: all 300ms ease !important;
    }
    
    .title-home {
        display: inline-block;
        padding-bottom: 0px;
        font-size: 37px;
        font-weight: 500;
        line-height: 47px;
        color: #444;
    }
    
    .description-home {
        font-size: 19px;
        line-height: 1.5em;
        font-weight: 300;
        color: rgba(68, 68, 68, 0.6);
    }
    
    .title-home {
        display: inline-block;
        padding-bottom: 0px;
        border-bottom: 3px solid #444;
        font-size: 37px;
        font-weight: 500;
        line-height: 41px;
        color: #444;
        margin-bottom: 14px;
        text-decoration: none;
    }
    
    .description-block a {
        border-bottom: 0 !important;
    }
    /* */
    
    body.transparent-header .description-block {}
    
    body.transparent-header .footer.home .footer-copyright {
        opacity: 0.8;
    }
    
    body.fullscreen .description-block {
        bottom: -5px;
    }
    
    .body-home {
        overflow-x: hidden;
        overflow-y: hidden;
        /*height: 100vh;*/
        height: 100%;
        padding-top: 0;
        font-size: 12px;
        font-weight: 400;
    }
    
    .offset-top-small {
        margin-top: -166px;
    }
    
    .logo {
        display: inline-block;
        margin-top: 37px;
        margin-right: auto;
        margin-left: auto;
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
        text-decoration: none;
    }
    
    .logo:hover {
        /* opacity: 0.56; */
    }
    
    .text-centered {
        text-align: center;
    }
    
    .navbar {
        background-color: transparent;
    }
    
    .navlink {
        display: block;
        padding: 0px;
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
        font-size: 13px;
        font-weight: 400;
        text-align: left;
    }
    
    .navlink:hover {
        color: #a3a3a3;
    }
    
    .navlink.w--current,
    .navlink.child {
        color: rgba(158, 157, 144, 0.73) !important;
    }
    
    .navlink.child {
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
    }
    
    .navmenu {
        bottom: 2px;
        /*width: 83px;*/
        margin-top: 30px;
        float: left;
        line-height: 23px;
    }
    
    .navbar:not(.smaller) .navmenu.child {
        position: absolute !important;
        background-color: #F7F6EF;
        margin-top: 0px !important;
        padding-top: 30px;
        top: 0;
        padding-left: 20px !important;
        z-index: 99;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
        -o-transition: visibility 0s linear 0.2s, opacity 0.2s linear;
        transition: visibility 0s linear 0.2s, opacity 0.2s linear;
    }
    
    .navbar:not(.smaller) .navmenu.child.onHover {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }
    
    .navbar:not(.smaller) .navmenu.child:before {
        height: 68px;
        float: left;
        position: absolute;
        margin-left: -47px;
        width: 27px;
    }
    
    body.sticky .header .navbar.smaller .navmenu li a.child {
        font-size: 17px;
        font-weight: 400;
        padding-top: 9px;
        padding-bottom: 23px;
    }
    
    body.sticky .header .navbar.smaller .navmenu li a.child:hover {
        color: #444 !important;
    }
    
    .left-head {
        margin-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        z-index: 9;
    }
    
    .right-head {
        padding-right: 0px;
    }
    
    .project-potfolio {
        position: relative;
        overflow-x: hidden;
        overflow-y: hidden;
        width: 49.5%;
        margin-bottom: 10px;
        float: left;
    }
    
    .project-potfolio.left {
        margin-right: 0.5%;
        clear: both;
    }
    
    .project-potfolio.right {
        margin-left: 0.5%;
    }
    
    .project-potfolio.middle {
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    
    .mask {
        position: absolute;
        z-index: 9;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0);
        opacity: 0;
        text-align: center;
        left: 0;
    }
    
    .portfolio-title {
        display: block;
        height: 100%;
        margin-top: -10px;
        -webkit-transform: translate(0%, 50%);
        -ms-transform: translate(0%, 50%);
        -o-transform: translate(0%, 50%);
        transform: translate(0%, 50%);
        color: white;
        font-size: 57px;
        font-weight: 400;
        text-align: center;
    }
    
    .portfolio-title._3columns-title {
        margin-top: -20px;
        /*margin-top: -34px;*/
        font-size: 51px;
    }
    
    .footer {
        height: 100px;
        padding-right: 20px;
        padding-left: 20px;
        clear: both;
        background-color: #FFF;
    }
    
    .content-grey {
        padding-top: 125px;
        text-align: center;
    }
    
    .content-text {
        text-align: center;
    }
    
    .content-text.blog {
        margin-bottom: 100px;
        padding-bottom: 82px;
        border-bottom: 1px solid #dedede;
    }
    
    .content-text.blog.last {
        margin-bottom: 0px;
        border-bottom-style: none;
        border-bottom-width: 0px;
    }
    
    .content-text.blog.sticky {
        background-color: #FFF;
        padding-top: 75px;
    }
    
    .title-page,
    .title-page.header {
        display: inline-block;
        margin-bottom: 120px;
        padding-bottom: 20px;
        border-bottom: 6px solid #444;
        font-size: 74px;
        font-weight: 500;
        margin-top: 10px;
        line-height: 44px;
    }
    
    .title-page.blog {
        margin: 0 auto;
        text-align: center;
        margin-bottom: 0px;
        padding-bottom: 15px;
        border-bottom-style: none;
        border-bottom-width: 0px;
        font-size: 51px;
        line-height: 66px;
    }
    
    .title-page.title-header {
        text-align: center;
        background-color: transparent;
        margin-bottom: 0 !important;
    }
    
    .title-page.background--dark {
        color: #FDFDF7;
        border-color: #FDFDF7;
    }
    
    .title-page a {
        border-bottom: 0px !important;
        color: #444 !important;
    }
    
    .title-page.overimage {
        display: inline-block !important;
    }
    
    .wrapper.multi-title .title-page {
        display: inline;
        padding-bottom: 0px;
        font-weight: 500;
        line-height: 102px;
        font-size: 62px;
    }
    
    .wrapper.multi-title .content-grey {
        padding-top: 105px !important;
    }
    
    .wrapper.multi-title .p-wrapper {
        margin-top: 75px;
    }
    
    .content-grey.titleontop {
        padding-top: 91px !important;
    }
    
    .wrapper.multi-title .titleontop {
        padding-top: 16px !important;
    }
    
    .wrapper.multi-title .portfolio-ontop {
        padding-top: 105px !important;
    }
    
    .xxxxxxxxxxxx {
        margin-bottom: 20px;
    }
    
    .p-wrapper p {
        display: inline-block;
        max-width: 701px;
        margin-bottom: 1.6em;
        text-align: left;
    }
    
    b,
    strong {
        font-weight: 500 !important;
        color: #626262;
    }
    
    hr {
        border: 0;
        display: block;
        width: 80px;
        margin-top: 30px;
        height: 75px;
        margin-right: auto;
        margin-left: auto;
        border-top-style: solid;
        border-top-width: 5px;
    }
    
    dl {
        font-size: 20px;
        line-height: 1.5em;
        color: #626262;
        font-weight: 300;
        display: inline-block;
        margin-bottom: 25px;
    }
    
    dl dt {
        font-weight: 500;
        padding-top: 25px;
        border-bottom: 1px solid #444;
        display: inline-block;
        margin-bottom: 10px;
        line-height: 1.4em;
    }
    
    dl dt:first-child {
        padding-top: 0px;
    }
    
    blockquote {
        background-color: #FFF;
        display: inline-block;
        padding: 34px 49px;
        margin-bottom: 25px;
        !important;
    }
    
    blockquote p {
        margin-bottom: 0px !important;
        font-size: 20px;
        color: #A1A1A1;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 400;
        padding-bottom: 9px;
        border-bottom-style: none;
        border-bottom-width: 0px;
        font-size: 50px;
        line-height: 40px;
        color: #444;
        text-align: left;
        width: auto;
        margin: 0 auto;
        margin-top: 45px;
        margin-bottom: 60px;
        ;
        border-bottom: 4px solid #444;
        width: auto;
        margin-left: 0;
        display: table;
    }
    
    h2 {
        font-size: 41px;
        padding-bottom: 3px;
        border-bottom-width: 3px;
    }
    
    h3 {
        font-size: 32px;
        padding-bottom: 0px;
        border-bottom-width: 2px;
        line-height: 35px;
    }
    
    h4 {
        font-size: 27px;
        padding-bottom: 0px;
        border-bottom-width: 2px;
        line-height: 31px;
    }
    
    h5 {
        font-size: 25px;
        font-weight: 300;
        padding-bottom: 0px;
        border-bottom-width: 1px;
        line-height: 29px;
    }
    
    h6 {
        font-size: 23px;
        font-weight: 300;
        padding-bottom: 0px;
        border-bottom-width: 1px;
        line-height: 29px;
    }
    
    h1:after,
    h2:after,
    h3:after,
    h4:after,
    h5:after,
    h6:after {
        content: '';
        display: block;
        width: 20px;
        position: absolute;
    }
    
    table {
        font-size: 18px;
        line-height: 1.5em;
        color: #626262;
        font-weight: 300;
        margin-bottom: 25px;
        ;
        display: inline-block;
    }
    
    table thead th,
    table td,
    table tbody th {
        padding-right: 30px;
        border-bottom: 1px solid #EDECE0;
    }
    
    table thead th {
        line-height: 2em;
        font-weight: 500;
        border-bottom: 1px solid #444;
    }
    
    table tbody th {
        line-height: 2em;
        font-weight: 300;
    }
    
    table tr {
        line-height: 2em;
    }
    
    address {
        font-size: 17px;
        line-height: 1.3em;
        color: rgba(158, 157, 144, 0.73);
        font-weight: 300;
        margin-bottom: 25px;
    }
    
    abbr {
        color: rgba(158, 157, 144, 0.73);
    }
    
    acronym {
        border-bottom: 1px dashed;
        color: rgba(158, 157, 144, 0.73);
    }
    
    cite {
        color: rgba(158, 157, 144, 0.73);
    }
    
    kbd,
    code,
    pre,
    tt {
        font-size: 14px;
        color: #444;
        background-color: #FFF;
        padding: 5px 10px;
    }
    
    ins {
        color: rgba(158, 157, 144, 0.73);
        text-decoration: none;
        border-bottom: 1px dashed #C5C4B5;
    }
    
    q,
    var {
        color: rgba(158, 157, 144, 0.73);
    }
    
    .p-wrapper hr+h1,
    .p-wrapper hr+h2,
    .p-wrapper hr+h3,
    .p-wrapper hr+h4,
    .p-wrapper hr+h5,
    .p-wrapper hr+h6 {
        margin-top: -15px;
    }
    
    .p-wrapper ul+p {
        margin-top: -30px !important;
    }
    
    .p-wrapper>*:first-child:not(p) {
        /*margin-top: -20px !important;*/
        margin-top: 22px !important;
    }
    
    .post .p-wrapper>*:first-child:not(p) {
        margin-top: -20px !important;
    }
    
    h2.subtitle-page,
    h3.subtitle-page {
        font-size: 31px;
        border-bottom: 0px;
        line-height: 35px;
        margin-bottom: 40px;
    }
    
    h3.subtitle-page {
        font-size: 29px;
        margin-bottom: 43px;
    }
    
    ul:not(.children),
    ol:not(.children) {
        /*width: 75%;
  margin: 0 auto;*/
        padding-left: 50px;
        text-align: left;
        font-size: 20px;
        line-height: 1.8em;
        color: #626262;
        font-weight: 300;
        display: block;
        margin-bottom: 25px;
    }
    
    ul b,
    ul strong,
    ol b,
    ol strong {
        font-weight: 400 !important;
    }
    
    ul {
        list-style-type: square;
    }
    
    ul li {
        padding-left: 10px;
    }
    
    .comments-link {
        /*padding-top: 28px;*/
        display: inline-block;
        font-size: 19px;
    }
    
    .gallery img {
        border: 0 !important;
    }
    
    .gallery dl dt {
        border-bottom: 0px;
    }
    
    .edit-link {
        font-size: 19px;
    }
    
    .top-left {
        font-size: 13px;
        font-weight: 400;
    }
    
    .top-left.copyright {
        font-size: 12px;
    }
    
    .separator-one {
        display: block;
        width: 80px;
        height: 107px;
        margin-right: auto;
        margin-left: auto;
        border-top-style: solid;
        border-top-width: 5px;
    }
    
    .logo-text {
        padding-top: 10px;
        color: black;
        font-size: 21px;
        font-weight: 500;
        text-align: center;
        letter-spacing: 7px;
    }
    
    .logo-subtext {
        margin-top: 3px;
        color: black;
        font-size: 7px;
        text-align: center;
        letter-spacing: 6px;
    }
    
    .form-wrapper {
        display: block;
        width: 85%;
        max-width: 561px;
        margin-right: auto;
        margin-bottom: 87px;
        margin-left: auto;
    }
    
    .label-form {
        margin-bottom: 18px;
        color: #737373;
        font-size: 24px;
        font-weight: 300;
        text-align: left;
    }
    
    .field-form {
        height: 50px;
        margin-bottom: 34px;
        background-color: #FFF;
        color: #9e9e9e;
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 1px;
    }
    
    .field-form.message {
        height: 190px;
        margin-bottom: 75px;
    }
    
    .submit-form {
        margin-bottom: 40px;
        padding: 16px 60px;
        border: 5px solid #444;
        background-color: transparent;
        -webkit-transition: all 300ms ease;
        -o-transition: all 300ms ease;
        transition: all 300ms ease;
        color: #444;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 1px;
        text-decoration: none;
    }
    
    .submit-form:hover {
        background-color: #444;
        color: #ededed;
    }
    
    .submit-form.blog {
        display: inline-block;
    }
    
    .social-icon {
        width: auto;
        height: auto;
        padding-top: 0px;
        border-radius: 0px;
        background-color: transparent;
        font-family: 'Ss social', sans-serif;
        color: #444;
        text-decoration: none;
    }
    
    .social-block {
        margin-top: 52px;
        text-align: right;
    }
    
    .aboutme-image {
        margin-bottom: 99px;
    }
    
    .loading-mask {
        position: fixed;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        z-index: 2000;
        width: 100%;
        height: 100%;
        background-color: white;
    }
    
    .footer-copyright {
        padding-top: 40px;
        text-align: center;
    }
    
    .image-post {
        margin-bottom: 91px;
    }
    
    .comments-block {
        display: block;
        width: 85%;
        max-width: 561px;
        margin-right: auto;
        margin-bottom: 53px;
        margin-left: auto;
        text-align: left;
    }
    
    .comments-block .comment {
        margin-bottom: 71px;
        padding-top: 65px;
        border-top: 1px solid #dedede;
        position: relative;
    }
    
    .comments-block .comments-group .comment:last-child {
        border-bottom: 1px solid #dedede;
        padding-bottom: 48px;
        margin-bottom: 104px;
    }
    
    .comments-block .comments-group .comment:first-child {}
    
    .comments-block .comments-group .children .comment:last-child {
        border-bottom: 0px;
    }
    
    .comments-block .comments-group .children {
        list-style: none;
    }
    
    .comments-block .comments-group .children .comment {
        padding-bottom: 0px;
        margin-bottom: 63px;
    }
    
    .comment-title {
        display: inline-block;
        margin-right: 20px;
        margin-bottom: 18px;
        font-size: 24px;
        line-height: 1.6em;
    }
    
    .comment-title a {
        color: #444 !important;
        border-bottom: 0px !important;
    }
    
    .comment-p p {
        font-size: 21px;
    }
    
    .comment-date {
        display: inline-block;
        margin-bottom: 18px;
        color: #737373;
        font-size: 16px;
        font-weight: 300;
    }
    
    .comment-reply-link {
        font-size: 15px;
    }
    
    .comment .reply {
        display: inline-block;
        right: 0;
        top: 76px;
        position: absolute;
    }
    
    #cancel-comment-reply-link {
        font-size: 19px;
        margin-left: 31px;
        margin-bottom: 100px;
        display: inline-block;
    }
    
    #email-form {
        text-align: center;
    }
    
    .avatar-comments {
        display: inline-block;
        margin-right: 12px;
    }
    
    .avatar-comments img {
        vertical-align: bottom;
    }
    
    .logout-link {
        padding-bottom: 3px;
        position: absolute;
        right: 0;
        font-size: 19px;
    }
    
    .bloglist-sepparator {
        height: 1px;
    }
    
    .bloglist-date {
        margin-bottom: 89px;
        color: #969696;
        font-size: 17px;
        line-height: 1.6em;
        margin-top: -3px;
    }
    
    .wrapper a:not(.submit-form) {
        color: #969696;
        text-decoration: none;
        border-bottom: 0px solid #969696 !important;
    }
    
    .wrapper a:not(.submit-form):hover {
        color: rgba(56, 56, 56, 0.527);
        border-bottom: 0px solid #444;
    }
    
    ._3columns {
        width: 32.5%;
    }
    
    .p-wrapper {
        margin-bottom: 83px;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }
    
    .n-m-b {
        margin-bottom: 0px;
    }
    
    body.sticky .header .navbar.smaller .navmenu {
        margin-top: 0px;
        padding-top: 20px;
        padding-right: 0px;
        visibility: visible;
        opacity: 1;
        margin-left: 0px;
    }
    
    body.sticky .header .navbar.smaller .navmenu ul {
        list-style-type: none;
    }
    
    body.sticky .header .navbar.smaller .navmenu li {
        margin-bottom: 0px;
        display: block;
        border-bottom: 0px;
    }
    
    body.sticky .header .navbar.smaller .navmenu li a {
        font-size: 28px;
        font-weight: 500;
        border: 0px;
        padding: 33px 0 33px 0;
    }
    
    body.sticky .header .navbar.smaller .navmenu a:hover {}
    
    .tags-icon,
    .categories-icon,
    .time-icon {
        background: url(images/blog-sprite.gif) no-repeat -5px 2px;
        width: 26px;
        padding: 0 9px;
    }
    
    .tags-icon {
        background: url(images/blog-sprite.gif) no-repeat -69px 4px;
        width: 26px;
        padding: 0 8px;
    }
    
    .categories-icon {
        background: url(images/blog-sprite.gif) no-repeat -37px 3px;
        width: 26px;
        padding: 0 8px;
    }
    
    .wrapp-title {
        width: 75%;
        margin: 0 auto;
    }
    
    .no-readmore {
        margin-bottom: -30px;
    }
    
    html.w-mod-js *[data-ix="fadein-1"] {
        opacity: 0;
        -webkit-transform: translate(0px, 10px);
        -ms-transform: translate(0px, 10px);
        -o-transform: translate(0px, 10px);
        transform: translate(0px, 10px);
    }
    
    html.w-mod-js *[data-ix="fadein-2"] {
        -webkit-transform: translate(0px, -108px);
        -ms-transform: translate(0px, -108px);
        -o-transform: translate(0px, -108px);
        transform: translate(0px, -108px);
    }
    
    html.w-mod-js *[data-ix="fadein-3"] {
        opacity: 0;
        -webkit-transform: translate(0px, -10px);
        -ms-transform: translate(0px, -10px);
        -o-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
    }
    
    html.w-mod-js *[data-ix="fadein-4"] {
        opacity: 0;
        -webkit-transform: translate(0px, -10px);
        -ms-transform: translate(0px, -10px);
        -o-transform: translate(0px, -10px);
        transform: translate(0px, -10px);
    }
    
    html.w-mod-js *[data-ix="fadein-portfolio-1"] {
        opacity: 0;
        -webkit-transform: translate(0px, 75px);
        -ms-transform: translate(0px, 75px);
        -o-transform: translate(0px, 75px);
        transform: translate(0px, 75px);
    }
    
    html.w-mod-js *[data-ix="fadein-portfolio-2"] {
        opacity: 0;
        -webkit-transform: translate(0px, 20px);
        -ms-transform: translate(0px, 20px);
        -o-transform: translate(0px, 20px);
        transform: translate(0px, 20px);
    }
    
    html.w-mod-js *[data-ix="fadein-portfolio-3"] {
        opacity: 0;
        -webkit-transform: translate(0px, 10px);
        -ms-transform: translate(0px, 10px);
        -o-transform: translate(0px, 10px);
        transform: translate(0px, 10px);
    }
    
    html.w-mod-js *[data-ix="fadein-portfolio-4"] {
        opacity: 0;
        -webkit-transform: translate(0px, 10px);
        -ms-transform: translate(0px, 10px);
        -o-transform: translate(0px, 10px);
        transform: translate(0px, 10px);
    }
    
    @media (max-width: 991px) {
        .nav-link {
            margin-right: 7px;
            margin-left: 7px;
            font-size: 13px;
        }
        .body-home {
            overflow-x: visible;
            overflow-y: visible;
        }
        .portfolio-title {
            font-size: 37px;
        }
        body.sticky .footer-right {
            display: none;
        }
        body.sticky .footer.home .footer-copyright {
            padding-top: 40px !important;
            float: none !important;
        }
        body.body-home {
            height: auto;
            padding-top: 120px;
        }
        body.sticky .footer.home {
            position: relative !important;
            height: 100px !important;
            line-height: inherit !important;
        }
        .w-hidden-main {
            float: left;
            width: 100%;
        }
        body.sticky .p-wrapper p {}
        body.sticky .project-potfolio._3columns {
            width: 50% !important;
        }
        body.sticky .theme-images-block .xxxxxxxxxxxx {
            width: 100% !important;
        }
    }
    
    @media (max-width: 767px) {
        .button {
            margin-bottom: 10px;
        }
        .section {
            padding: 32px 15px;
        }
        .nav-bar {
            padding-top: 26px;
            padding-bottom: 26px;
        }
        .header {
            position: absolute;
            padding-top: 0px;
            padding-bottom: 0px;
        }
        .logo.smaller {
            position: relative;
            width: auto;
        }
        .navbar.smaller {
            position: absolute;
            left: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            margin-top: 34px;
            margin-right: 20px;
            padding-left: 18px;
            z-index: 0;
        }
        .navlink {
            width: 100%;
            font-size: 20px;
            line-height: 56px;
            text-align: center;
            color: #444;
        }
        .navmenu {
            width: 100%;
            margin-top: 0px;
            background-color: rgba(253, 253, 249, 0.93);
        }
        .project-potfolio {
            width: 100%;
        }
        .project-potfolio.left {
            margin-right: 0%;
        }
        .project-potfolio.right {
            margin-left: 0%;
        }
        .portfolio-title {
            font-size: 45px;
        }
        .social-block.smaller {
            position: absolute;
            top: 0px;
            right: 0px;
            bottom: 0px;
            width: 25%;
            margin-right: 15px;
        }
        .menu-botton {
            padding: 14px;
            padding-left: 0px;
            float: left;
            background: url(images/menu-icon.png) no-repeat 5px center;
            color: transparent;
            position: absolute;
            top: 0px;
        }
        .menu-botton.w--open {
            background-color: transparent;
            opacity: .5;
            color: transparent;
        }
        body.sticky .project-potfolio._3columns {
            width: 100% !important;
        }
        .title-page.blog {
            font-size: 42px;
            line-height: 57px;
            padding-left: 20px;
            padding-right: 20px;
        }
        .wrapper.multi-title .title-page {
            font-size: 45px;
            line-height: 71px !important;
            border-width: 4px;
        }
    }
    
    @media (max-width: 479px) {
        .button {
            display: block;
        }
        .section {
            padding-right: 11px;
        }
        .nav-link {
            display: block;
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .header {
            position: absolute;
            height: 130px;
        }
        .navbar.smaller {
            margin: 36px auto 0px;
        }
        .navlink {
            font-size: 20px;
            line-height: 44px;
        }
        .portfolio-title {
            font-size: 34px;
        }
        .portfolio-title._3columns-title {
            font-size: 34px;
        }
        .content-grey {
            padding-top: 83px !important;
        }
        .title-page {
            margin-bottom: 89px;
            padding-bottom: 0px;
            font-size: 51px;
            line-height: 62px;
        }
        .wrapper.multi-title .title-page {
            font-size: 40px;
            line-height: 67px !important;
            border-width: 4px !important;
        }
        .wrapper.multi-title .content-grey {
            padding-top: 81px !important;
        }
        body.sticky .title-page:not(.blog) {}
        .p-wrapper {
            width: 85%;
        }
        .p-wrapper p {
            /*width: 85%;*/
            font-size: 22px;
            margin-left: 0;
            margin-right: 0;
            width: 100%;
        }
        .logo-text {
            padding-top: 0px;
        }
        .menu-botton {
            position: absolute;
            display: block;
            margin-top: 36px;
            margin-left: 115px;
            padding-left: 18px;
        }
        .navbar.smaller {
            padding-left: 0px;
        }
        .w-container-menu {
            width: 23px;
            height: 50px;
        }
        .menu-botton {
            margin-left: 0px;
            padding-left: 0px;
            margin-top: 31px;
        }
        .title-page.blog {
            font-size: 36px;
            line-height: 47px;
        }
        .title-page:not(.blog) {
            border-bottom: 5px solid #444 !important;
            line-height: 1.2em !important;
        }
        .reply {
            top: 30px !important;
        }
        .wrapp-title {
            width: 100%;
        }
    }
    
    .error,
    .success {
        font-size: 25px;
        line-height: 1.6em;
        font-weight: 300;
        margin-bottom: 43px;
        color: red;
    }
    
    .success {
        color: rgb(0, 196, 0);
    }
    
    .wp-caption {
        max-width: 100%;
    }
    
    .wp-caption-text {
        font-size: 16px;
        padding-top: 10px;
        margin-bottom: 10px;
    }
    
    .gallery-caption {}
    
    .bypostauthor {}
    
    .alignright {
        display: inline;
        float: right;
        margin-left: 20px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
    .alignleft {
        display: inline;
        float: left;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    
    .aligncenter {
        margin: 0 auto;
    }
    
    .pag-nav {
        border-top: 1px solid #dedede;
        padding-top: 77px;
    }
    
    .pag-nav a {
        font-size: 21px;
        font-weight: 300;
        text-decoration: none;
    }
    
    .pag-nav.list-post {
        border-top: 0px;
        padding-top: 0px;
        padding-bottom: 85px;
    }
    
    .social-block,
    .social-icon {
        text-rendering: optimizeLegibility;
    }
    
    .wrapper {
        padding: 0;
    }
    
    #email-form .form-submit,
    .comment-respond .comment-reply-title {
        display: none;
    }
    
    .submit-form.portfolio {
        margin-top: 0px;
        display: inline-block;
        margin-bottom: 108px;
    }
    
    .services-list {
        width: 75%;
        margin: 0 auto;
        color: rgba(158, 157, 144, 0.73);
        margin-bottom: 57px;
        margin-top: -18px;
        font-size: 22px;
        font-weight: 100;
        line-height: 1.6em;
    }
    
    body.sticky .header {
        height: 120px;
        position: absolute;
    }
    
    body.sticky .title-page:not(.blog) {
        margin-bottom: 80px;
        text-align: center;
    }
    
    body.sticky .title-page.portfolio-title-page {
        margin-top: 20px;
        margin-bottom: 142px;
    }
    
    body.sticky .header .logo {
        margin-top: 32px;
    }
    
    body.sticky .header .social-block {
        margin-top: 51px;
    }
    
    body.sticky .p-wrapper p {
        display: block;
        margin: 0 auto;
        padding-bottom: 0px;
        margin-bottom: 52px;
        max-width: 100%;
    }
    
    body.sticky .content-grey {
        padding-top: 122px;
    }
    
    body.sticky .project-potfolio.left {
        margin-right: 0 !important;
    }
    
    body.sticky .project-potfolio.right {
        margin-left: 0 !important;
    }
    
    body.sticky .project-potfolio {
        margin-bottom: 0px !important;
        width: 50% !important;
        margin-top: -1px;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-backface-visibility: hidden;
        -webkit-transform: perspective(999px);
        -moz-transform: perspective(999px);
        -ms-transform: perspective(999px);
        -o-transform: perspective(999px);
        transform: perspective(999px);
    }
    
    body.sticky .project-potfolio img {
        opacity: 0;
        display: block;
    }
    
    body.sticky .project-potfolio a {
        border-bottom: 0px;
        width: 100%;
        display: block;
    }
    
    body.sticky .project-potfolio a:hover {
        border-bottom: 0px;
    }
    
    body.sticky .wrapper.vertical {
        background-color: #fff;
    }
    
    body.sticky .wrapper.vertical .portfolio-container {
        margin: 0 auto;
    }
    
    body.sticky .wrapper.vertical._940 .portfolio-container {
        max-width: 1140px;
    }
    
    body.sticky .wrapper.vertical._1294 .portfolio-container {
        max-width: 1294px;
    }
    
    body.sticky .project-potfolio.aspectratio {
        height: 0;
        padding: 22% 0 0 0;
        overflow: hidden;
    }
    
    body.sticky .project-potfolio.aspectratio a {
        position: absolute;
        top: 0;
        height: 100%;
    }
    
    body.sticky .project-potfolio.aspectratio.ar_4_3 {
        padding: 25% 0 0 0;
    }
    
    body.sticky .project-potfolio.aspectratio.ar_1_1 {
        padding: 33.333% 0 0 0;
    }
    
    body.sticky .project-potfolio.aspectratio.ar_3_2 {
        padding: 22.25% 0 0 0;
    }
    
    body.sticky .project-potfolio.aspectratio.ar_16_9 {
        padding: 18.8% 0 0 0;
    }
    
    body.sticky .project-potfolio.aspectratio.ar_3_1 {
        padding: 11.1% 0 0 0;
    }
    
    @media (max-width: 991px) {
        body.sticky .project-potfolio.aspectratio.ar_4_3 {
            padding: 37.5% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_1_1 {
            padding: 50% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_3_2 {
            padding: 33.333% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_16_9 {
            padding: 28.1% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_3_1 {
            padding: 16.7% 0 0 0;
        }
    }
    
    @media (max-width: 767px) {
        body.sticky .project-potfolio.aspectratio.ar_4_3 {
            padding: 75% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_1_1 {
            padding: 100% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_3_2 {
            padding: 66.66% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_16_9 {
            padding: 56.3% 0 0 0;
        }
        body.sticky .project-potfolio.aspectratio.ar_3_1 {
            padding: 33.333% 0 0 0;
        }
    }
    
    body.sticky ._3columns {
        width: 33.333% !important;
    }
    
    body.sticky .project-potfolio.middle {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    
    body.sticky .home-slider .w-slide {
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    body.sticky .xxxxxxxxxxxx {
        margin-bottom: 0px;
    }
    
    body.sticky .p-wrapper.nocolumns p {}
    
    body.sticky .image-post {
        margin-bottom: 108px;
    }
    
    body.sticky .separator-one {
        height: 106px;
        clear: both;
    }
    
    body.sticky .p-wrapper:not(.notspacing) {
        margin-bottom: 55px;
        margin-top: -14px;
    }
    
    body.sticky .form-wrapper {
        margin-top: -21px;
    }
    
    body.sticky .wrapper.inner .content-grey {
        background-color: #F7F6EF;
    }
    
    body.sticky .theme-images-block {
        background-color: #F7F6EF;
    }
    
    body.sticky .xxxxxxxxxxxx {
        margin-bottom: 0px !important;
        width: 33.333% !important;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        -webkit-backface-visibility: hidden;
        -webkit-transform: perspective(999px);
        -moz-transform: perspective(999px);
        -ms-transform: perspective(999px);
        -o-transform: perspective(999px);
        transform: perspective(999px);
        border-bottom: 0px;
        background-color: #fff;
    }
    
    body.sticky .xxxxxxxxxxxx img {
        visibility: hidden;
    }
    
    body.sticky .xxxxxxxxxxxx a {
        border-bottom: 0px !important;
        width: 100%;
    }
    
    body.sticky .xxxxxxxxxxxx a.w-inline-block .mask {
        background-color: rgba(0, 0, 0, 0.21);
    }
    
    body.sticky .xxxxxxxxxxxx a.w-inline-block {
        border-bottom: 0px;
    }
    
    body.sticky .xxxxxxxxxxxx a:hover {
        border-bottom: 0px !important;
    }
    
    body.sticky .wrapper.vertical {
        background-color: #fff;
    }
    
    body.sticky .wrapper.vertical .theme-images-block {
        margin: 0 auto;
    }
    
    body.sticky .wrapper.vertical._940 .theme-images-block {
        max-width: 1140px;
    }
    
    body.sticky .wrapper.vertical._1294 .theme-images-block {
        max-width: 1140px;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio {
        height: 0;
        padding: 22% 0 0 0;
        overflow: hidden;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio a {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        width: 100%;
        border: 0;
    }
    /* this is for w-lightbox xxxxxxxxxxxx=image-portfolio*/
    
    .aspectratio a {
        position: absolute;
        top: 0;
        height: 100%;
        left: 0;
        width: 100%;
        border: 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio a:hover {
        border: 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio.ar_4_3 {
        padding: 37.5% 0 0 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio.ar_1_1 {
        padding: 50% 0 0 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio.ar_3_2 {
        padding: 33.333% 0 0 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio.ar_16_9 {
        padding: 28.1% 0 0 0;
    }
    
    body.sticky .xxxxxxxxxxxx.aspectratio.ar_3_1 {
        padding: 16.7% 0 0 0;
    }
    
    @media (max-width: 991px) {
        body.sticky .xxxxxxxxxxxx.aspectratio.ar_4_3 {
            padding: 75% 0 0 0;
        }
        body.sticky .xxxxxxxxxxxx.aspectratio.ar_1_1 {
            padding: 100% 0 0 0;
        }
        body.sticky .xxxxxxxxxxxx.aspectratio.ar_3_2 {
            padding: 66.66% 0 0 0;
        }
        body.sticky .xxxxxxxxxxxx.aspectratio.ar_16_9 {
            padding: 56.3% 0 0 0;
        }
        body.sticky .xxxxxxxxxxxx.aspectratio.ar_3_1 {
            padding: 33.333% 0 0 0;
        }
    }
    
    body.sticky .footer.home {
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 60px;
    }
    
    body.sticky .footer.home {
        padding-top: 0px;
        position: fixed;
        width: 100%;
        bottom: 0;
        height: 50px;
        line-height: 50px;
        z-index: 10;
    }
    
    body.sticky .footer.home .footer-copyright {
        padding-top: 0px;
        float: left;
    }
    
    body.sticky .footer-right-back {
        position: fixed;
        right: 20px;
        height: 50px;
        bottom: -50px;
        z-index: 5;
        line-height: 66px;
        text-align: right;
    }
    
    body.sticky .footer.home .footer-right {
        float: right;
        height: 100%;
        line-height: 66px;
    }
    
    body.sticky .footer.home .footer-right a,
    body.sticky .footer-right-back a {
        background: url(images/sprite-controls.png) no-repeat 0px -52px;
        width: 26px;
        height: 25px;
        margin-left: 7px;
        display: inline-block;
        border-bottom: 0;
    }
    
    body.sticky .footer.home .footer-right a.bt-title,
    body.sticky .footer-right-back a.bt-title {
        float: left;
        background-image: none;
        width: auto;
        margin-top: 11px;
        line-height: 29px;
        font-size: 14px;
        margin-right: 9px;
        text-decoration: none;
        color: #222 !important;
        -webkit-transition: all 200ms ease;
        -o-transition: all 200ms ease;
        transition: all 200ms ease;
        transform: translate(0px, 0px);
    }
    
    body.sticky .footer.home .footer-right a.bt-title.background--dark,
    body.sticky .footer-right-back a.bt-title.background--dark {
        color: #FDFDF7 !important;
    }
    
    body.sticky .footer.home .footer-right a.bt-title:hover,
    body.sticky .footer-right-back a.bt-title:hover {
        color: rgba(158, 157, 144, 0.73) !important;
        border-bottom: 1px solid rgba(158, 157, 144, 0.51);
    }
    
    body.sticky .footer.home .footer-right a.bt-full-screen {
        background-position: 0px -52px;
    }
    
    body.sticky .footer.home .footer-right a.bt-pp-screen,
    body.sticky .footer-right-back a.bt-pp-screen {
        background-position: -34px -52px;
    }
    
    body.sticky .footer.home .footer-right a.bt-play-screen,
    body.sticky .footer-right-back a.bt-play-screen {
        background-position: -138px -52px;
    }
    
    body.sticky .footer.home .footer-right a.bt-left-screen,
    body.sticky .footer-right-back a.bt-left-screen {
        background-position: -69px -52px;
    }
    
    body.sticky .footer.home .footer-right a.bt-right-screen,
    body.sticky .footer-right-back a.bt-right-screen {
        background-position: -104px -52px;
    }
    
    body.sticky .footer.home .footer-right a:hover,
    body.sticky .footer-right-back a:hover {
        background-position-y: 0px;
        border-bottom: 0;
    }
    
    body.sticky .footer-right-back a.bt-full-screen {
        background-position-y: 0px;
    }
    
    body.sticky .footer-right-back a.bt-full-screen:hover {
        background-position: 0px -52px;
    }
    
    body.sticky .header .navbar:not(.smaller) .navmenu {
        margin-top: 30px;
        height: 120px;
        padding-left: 21px;
        padding-right: 21px;
    }
    
    body.sticky .header .navbar.smaller .navmenu {
        padding-left: 0px;
    }
    
    body.sticky .header .navmenu a {
        clear: both;
        float: left;
        margin-bottom: 8px;
        line-height: 14px;
        height: 16px;
        white-space: nowrap;
        text-transform: uppercase;
        font-size: 11px;
    }
    
    body.sticky .header .navbar:not(.smaller) .navmenu:first-child {
        /*padding-left: 0px;*/
        margin-left: -21px;
    }
    
    body.sticky .header .main-menu {
        height: 120px;
        overflow: hidden;
    }
    
    body.sticky .header .main-menu ul {
        list-style-type: none;
        position: static;
    }
    
    body.sticky .header .main-menu li {
        padding-left: 0px;
        height: 24px;
    }
    
    .navlink:hover,
    .social-icon:hover,
    .navlink.w--current,
    .current-menu-item a {
        color: rgba(158, 157, 144, 0.73) !important;
        border-bottom: 1px solid rgba(158, 157, 144, 0.51);
    }
    
    .social-icon:hover {
        text-decoration: none;
        border-bottom: 0px;
    }
    
    .logo-text {
        letter-spacing: 6px;
    }
    
    .header-image {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 338px;
        text-align: center;
    }
    
    .wrapper a:not(.submit-form) {
        color: rgba(158, 157, 144, 0.73);
        text-decoration: none;
        border-bottom: 1px solid #C5C4B5;
    }
    
    .bloglist-date {
        color: rgba(158, 157, 144, 0.73);
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .bloglist-date a {
        margin-left: 2px;
    }
    
    .social-post {
        padding-top: 36px;
        padding-bottom: 25px;
        margin: 0 auto;
        display: inline-block;
    }
    
    .counter-twitter {
        float: left;
        margin-right: 2em;
    }
    
    .counter-fb-like {
        float: left;
        margin-right: 2em;
    }
    
    .counter-google-one {
        float: left;
    }
    
    .loading-mask {
        background-color: #F7F6EF;
        z-index: 9999;
    }
    
    .loading-mask .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: transparent;
        width: 50px;
        height: 50px;
        margin: -20px 0 0 -20px;
        border-width: 5px;
        border-style: solid;
        border-color: #444 #444 rgba(255, 255, 255, .5) rgba(255, 255, 255, .5);
        opacity: 1;
        border-radius: 25px;
        -webkit-animation: spin 1s linear infinite;
        -moz-animation: spin 1s linear infinite;
        -o-animation: spin 1s linear infinite;
        -ms-animation: spin 1s linear infinite;
    }
    
    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg)
        }
        100% {
            -webkit-transform: rotate(-360deg)
        }
    }
    
    @-moz-keyframes spin {
        0% {
            -moz-transform: rotate(0deg)
        }
        100% {
            -moz-transform: rotate(-360deg)
        }
    }
    
    @-o-keyframes spin {
        0% {
            -o-transform: rotate(0deg)
        }
        100% {
            -o-transform: rotate(-360deg)
        }
    }
    
    @keyframes spin {
        0% {
            transform: rotate(0deg)
        }
        100% {
            transform: rotate(-360deg)
        }
    }
    
    .logo-image {
        background-repeat: no-repeat;
        background-position: center;
    }
    
    .logo-image img {
        opacity: 0;
    }
    /* Transparent Header */
    
    body.transparent-header .header {
        background-color: transparent;
    }
    
    body.transparent-header {
        padding-top: 0;
    }
    
    body.transparent-header .footer.home {
        background-color: transparent;
    }
    
    body.transparent-header .swapcontrast {
        -webkit-transition: color 600ms ease;
        -o-transition: color 600ms ease;
        transition: color 600ms ease;
    }
    
    body.transparent-header .swapcontrast.background--dark {
        color: #FDFDF7;
    }
    
    body.transparent-header .header .navmenu a.w--current.swapcontrast.background--dark,
    body.transparent-header .header .navmenu a.swapcontrast.background--dark:hover,
    .social-icon.swapcontrast.background--dark:hover {
        -webkit-transition: color 0ms ease;
        -o-transition: color 0ms ease;
        transition: color 0ms ease;
        color: #B8B8B1;
    }
    
    body.transparent-header .social-icon.swapcontrast.background--dark:hover {
        border-bottom: 0px;
    }
    
    body .footer-right-back a.swapcontrast.background--dark,
    body.transparent-header .footer-right a.swapcontrast.background--dark {
        background-position-y: -104px !important;
    }
    
    body .footer-right-back a.bt-full-screen.swapcontrast.background--dark {
        background-position-y: -155px !important;
    }
    
    body .footer-right-back a.swapcontrast.background--dark:hover,
    body.transparent-header .footer-right a.swapcontrast.background--dark:hover {
        background-position-y: -155px !important;
    }
    
    body.admin-bar .header {
        margin-top: 32px;
    }
    
    .title-page.blog b,
    .title-page.blog strong {
        font-weight: 600 !important;
        color: #444 !important;
    }
    
    .grey-back {
        background-color: #F7F6EF;
        font-size: 21px;
        font-weight: 300;
        color: #969696;
    }
    
    .grey-back a {
        border-bottom: 1px solid #C5C4B5;
        color: rgba(158, 157, 144, 0.73);
    }
    
    .post-password-form label {
        font-weight: 300;
        display: inline-block;
    }
    
    .post-password-form input[type="password"] {
        display: block;
        width: 100%;
        padding: 8px 12px;
        line-height: 1.428571429;
        vertical-align: middle;
        border: 1px solid #CCC;
        height: 50px;
        margin-bottom: 34px;
        background-color: #FFF;
        color: #9E9E9E;
        font-size: 20px;
        font-weight: 300;
        letter-spacing: 1px;
    }
    
    .post-password-form input[type="submit"] {
        font-size: 15px;
        padding: 12px 24px;
        display: inline-block;
        margin-left: 2px;
        line-height: 20px;
    }
    
    body.sticky .project-potfolio.aspectratio {
        padding: 22.50% 0 0 0;
    }
    
    body.sticky .theme-images-block .xxxxxxxxxxxx.aspectratio {
        padding: 33.76% 0 0 0;
    }
    
    @media (max-width: 991px) {
        body.sticky .project-potfolio.aspectratio {
            padding: 33.76% 0 0 0;
        }
        body.sticky .theme-images-block .xxxxxxxxxxxx.aspectratio {
            padding: 67.57% 0 0 0;
        }
    }
    
    @media (max-width: 767px) {
        body.sticky .project-potfolio.aspectratio {
            padding: 67.57% 0 0 0;
        }
        body.sticky .theme-images-block .xxxxxxxxxxxx.aspectratio {
            padding: 67.57% 0 0 0;
        }
    }
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    
    #header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background: black;
        z-index: 9999;
    }
    
    #header .logo {
        position: absolute;
        top: 0;
        left: 13px;
        width: 80px;
        height: 70px;
        margin-top: 0px;
        background: url(../img/Bob_Graham_Jr_logo_wt.png) no-repeat;
        background-size: 80px 70px;
    }
    
    #header .logo a {
        display: block;
        height: 70px;
        text-indent: -10000px;
        overflow: hidden;
    }
    
    #header nav {
        font-family: 'Dosis', sans-serif;
        font-style: normal;
        font-weight: 600 !important;
        font-size: 14px !important;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05em !important;
        float: right;
        margin: 16px 65px 0 0 !important;
        padding: 0 !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    #header nav .nav {
        vertical-align: top;
        display: inline-block;
    }
    
    ol,
    ul {
        list-style: none !important;
    }
    
    #header nav .nav>li {
        display: inline-block;
        color: #fff;
    }
    
    #header nav .nav li {
        position: relative;
    }
    
    .hideOnLeft a {
        color: white;
    }
    
    #header nav .nav span {
        position: relative;
        display: block;
        padding: 10px 14px 11px 15px !important;
        text-transform: uppercase;
        font-weight: 600;
        cursor: pointer;
        color: #fff;
        font-size: 14px;
    }
    
    .link-underline:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 4px;
        left: 0;
        background-color: #fff;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
        -o-transform: scaleX(0);
        transform: scaleX(0);
        -webkit-transition: all 0.4s ease-in-out 0s;
        -moz-transition: all 0.4s ease-in-out 0s;
        -ms-transition: all 0.4s ease-in-out 0s;
        -o-transition: all 0.4s ease-in-out 0s;
        transition: all 0.4s ease-in-out 0s;
    }
    
    .box-tooltip {
        position: absolute;
        display: block;
        width: 175px;
        height: 40px;
        line-height: 40px;
        text-indent: 0;
        font-family: 'Dosis', sans-serif;
        font-size: 13px;
        letter-spacing: 0.05em;
        font-weight: 400;
        color: #fff;
        text-align: center;
        background: #000;
        pointer-events: none;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: all .25s ease-out;
        -moz-transition: all .25s ease-out;
        -ms-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        transition: all .25s ease-out;
    }
    
    sup {
        top: -0.5em;
    }
    
    .box-tooltip:before {
        position: absolute;
        border: solid;
        border-color: #000 transparent;
        border-width: 10px 10px 0 10px;
        left: -20px;
        content: "";
        top: 35%;
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(180deg);
        -ms-transform: rotateZ(180deg);
        -o-transform: rotateZ(180deg);
        transform: rotateZ(90deg);
    }
    
    #header .bt-mobile {
        position: absolute;
        display: block;
        top: 0;
        right: 0;
        width: 70px;
        height: 70px;
        background: none;
        overflow: hidden;
        cursor: pointer;
        opacity: 0;
    }
    
    .menu-button {
        position: absolute;
        width: 70px;
        height: 70px;
        top: 0;
        padding-left: 30px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background: rgb(202, 202, 202);
    }
    
    .nav>li>a {
        text-decoration: none;
    }
    
    .hideOnLeftMobile {
        display: block;
    }
    
    .hideOnDesktop {
        display: none;
    }
    
    @media (max-width: 900px) {
        .hideOnLeftMobile {
            display: none;
        }
        .hideOnDesktop {
            display: block;
        }
    }
    
    .mobileheader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background: black;
        z-index: 99999;
    }
    
    .mobilelogo {
        position: absolute;
        top: 0;
        left: 13px;
        width: 80px;
        height: 70px;
        background: url(../img/Bob_Graham_Jr_logo_wt.png) no-repeat;
        background-size: 80px 70px;
    }
    
    .mobile-menu-button {
        position: absolute;
        width: 70px;
        height: 70px;
        top: 0;
        right: 0;
        padding-left: 30px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
    }
    
    .mobileicon {
        position: absolute;
        height: 4px;
        width: 30px;
        top: 33px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background-color: #fff;
    }
    
    .mobileicon:before {
        content: "";
        position: absolute;
        width: 30px;
        height: 4px;
        top: -10px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background-color: #fff;
    }
    
    .mobileicon:after {
        content: "";
        position: absolute;
        width: 30px;
        height: 4px;
        top: 10px;
        -webkit-transition-duration: 0.5s;
        -moz-transition-duration: 0.5s;
        -ms-transition-duration: 0.5s;
        -o-transition-duration: 0.5s;
        transition-duration: 0.5s;
        background-color: #fff;
    }
    
    .responsive-menu-container {
        position: relative;
        margin-top: 70px;
        overflow: hidden;
        text-align: center;
        -webkit-transition: all 400ms cubic-bezier(.215, .61, .355, 1);
        -moz-transition: all 400ms cubic-bezier(.215, .61, .355, 1);
        -o-transition: all 400ms cubic-bezier(.215, .61, .355, 1);
        transition: all 400ms cubic-bezier(.215, .61, .355, 1);
        max-height: 0px;
    }
    
    .responsive-menu {
        background-color: #fff;
        border-bottom: solid 1px;
    }
    
    ul.mobile-navigation {
        margin: 0;
        padding: 0;
    }
    
    .responsive-menu-container .mobile-navigation>li {
        list-style: none;
        text-align: center;
    }
    
    .responsive-menu-container .mobile-navigation>li>a {
        font-weight: 700;
        font-size: 25px;
        color: #000;
        padding: 0;
        display: inline-block;
        font-family: open sans, sans-serif;
        text-decoration: none;
        background-color: white;
        line-height: 1.9;
        letter-spacing: 1px;
        outline: none;
        -webkit-font-smoothing: antialiased;
    }
    
    .bliccaThemes-header {
        background-color: transparent;
    }
    
    .responsive-navigation-button {
        margin-top: 0;
    }
    
    ul li {
        padding-left: 0px;
    }
    
    ul:not(.children),
    ol:not(.children) {
        padding-left: 0;
        text-align: left;
        font-size: 20px;
        line-height: 1em;
        color: #626262;
        font-weight: 300;
        display: block;
        margin-bottom: 0;
    }
    
    @media (max-width: 900px) {
        .responsive-menu-container.open-responsive-menu {
            max-height: 380px;
        }
    }
    
    h5.italiana {
        font-family: 'Dosis', sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0.65em;
        color: #111;
        text-align: left;
        text-transform: uppercase;
        margin: 0 0 3px 0;
        padding: 0 0 1px 10px;
    }
    
    h2.section-italiana {
        font-family: 'Italiana', serif;
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 2px;
        color: #111;
        text-align: left;
        text-transform: uppercase;
        margin: 0;
        padding: 0 0 0 10px;
    }
    
    h6.services-italiana {
        font-family: 'Italiana', serif;
        font-size: 20px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.35em;
        color: #111;
        text-align: left;
        text-transform: uppercase;
        margin: 12px auto 43px auto;
        padding: 0 0 0 10px;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        line-height: 170%;
        margin: 0 0 20px 0;
        width: 100%;
    }
    
    p {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        text-align: left;
        color: #5f5f5f;
        letter-spacing: 0.05em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        padding: 0 0 0 10px;
    }
    
    .awesome {
        font-size: 20px;
        margin: 0;
        padding: 12px 0 0 0;
        color: #999;
    }
    
    p a {
        color: #999;
        text-decoration: none;
        outline: none;
        -webkit-transition: all 0.5s linear;
        -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
        -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
    }
    /* preloader */
    
    #preloader {
        position: fixed;
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        z-index: 999999;
    }
    
    #preloader-status {
        display: table-cell;
        vertical-align: middle;
    }
    
    .preloader-position {
        position: relative;
        margin: 0 auto;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .preloader-effect {
        width: 60px;
        height: 60px;
    }
    
    .preloader-effect>span,
    .preloader-effect>span:before,
    .preloader-effect>span:after {
        position: absolute;
        content: "";
        display: block;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        border: 2px solid #000;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    .preloader-effect>span {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-left-color: transparent;
        -webkit-animation: preloader-spinner 2s infinite linear;
        -moz-animation: preloader-spinner 2s infinite linear;
        -ms-animation: preloader-spinner 2s infinite linear;
        -o-animation: preloader-spinner 2s infinite linear;
        animation: preloader-spinner 2s infinite linear;
    }
    
    .preloader-effect>span:before {
        width: 75%;
        height: 75%;
        border-right-color: transparent;
    }
    
    .preloader-effect>span:after {
        width: 50%;
        height: 50%;
        border-bottom-color: transparent;
    }
    
    @-webkit-keyframes preloader-spinner {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    
    @keyframes preloader-spinner {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    /* preload content */
    
    .preload-content {
        position: fixed;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: 0;
    }
    /* 880px */
    
    @media only screen and (max-width: 880px) {
        /* lower page */
        .lower-page {
            height: auto!important;
        }
        /* team */
        .team-photo {
            width: 100%;
        }
        /* divider */
        .dividerOT-2 {
            margin: 0 auto;
        }
        .divider-post {
            visibility: visible;
            display: block;
            position: relative;
            width: auto;
            height: 10px;
            margin: 20px auto;
        }
        /* header */
        #header {
            height: auto;
        }
        /* navigation */
        #header nav {
            margin: 0 0 15px 0;
        }
        #header nav .nav>li:hover>ul {
            padding-top: 15px;
        }
        /* navigation works */
        .box-menu-works.fixed nav {
            padding-left: 70px;
        }
        .box-menu-works.fixed {
            width: 100%!important;
        }
        /* submenu */
        .sub-menu {
            visibility: hidden;
            display: none;
        }
        /* tooltips */
        .box-tooltip {
            visibility: hidden;
            display: none;
        }
        /* mobile experience */
        .mobile-experience #header .logo {
            margin: 60px auto 30px auto;
        }
        /* headers */
        h2.section-title {
            font-size: 40px;
            margin: 0;
            padding: 0 0 0 10px;
        }
        h2.section-title-anurati {
            font-size: 40px;
            margin: -1px 0 2px 0;
            padding: 0 0 0 10px;
        }
        h2.section-news-title {
            font-size: 35px;
            color: #111;
            margin: 0;
            padding: 0 0 25px 0;
        }
        h2.section-news-subtitle {
            font-size: 13px;
            color: #999;
            margin: 0;
            padding: 0;
        }
        h5 {
            padding: 0 0 2px 10px;
        }
        /* hero headings */
        .hero-heading {
            font-size: 50px;
            margin: -3px auto 23px auto;
        }
        .hero-heading-montserrat {
            font-size: 50px;
            margin: -3px auto 21px auto;
        }
        .hero-heading-anurati {
            font-size: 50px;
            margin: 21px auto 24px auto;
        }
        .hero-subheading-top {
            padding-bottom: 4px;
        }
        .hero-txt {
            font-size: 12px;
            margin-top: -4px;
        }
        .hero-txt-play {
            margin-top: 22px;
        }
        .time-hero-txt-play {
            margin-top: -4px;
        }
        /* quote */
        .quote {
            text-align: left;
            padding: 13px 0 0 10px;
        }
        /* TIME STYLE */
        .time-heading {
            font-size: 110px;
            margin: 8px auto 0 auto;
        }
        .time-subheading-play {
            padding-bottom: 21px;
        }
    }
    /* 640px */
    
    @media only screen and (max-width: 640px) {
        /* upper page */
        .upper-page {
            height: 100%;
        }
        /* lower page */
        .lower-page {
            height: auto;
            min-height: inherit;
            margin-left: 10px;
            margin-right: 10px;
        }
        .lower-page-works-intro {
            height: auto;
            min-height: inherit;
            margin-left: 10px;
            margin-right: 10px;
        }
        .lower-page-works {
            height: auto;
            min-height: inherit;
            margin-left: 0;
            margin-right: 0;
        }
        .lower-page-testimonials {
            height: auto;
            min-height: inherit;
            margin-left: 0;
            margin-right: 0;
        }
        .lower-page-footer {
            height: auto;
            min-height: inherit;
            margin-left: 0;
            margin-right: 0;
        }
        .lower-page-footer-credits {
            height: auto;
            min-height: inherit;
            margin-left: 0;
            margin-right: 0;
            margin-bottom: 0;
        }
        .sections {
            padding: 70px 0;
        }
        /* divider */
        .dividerOT-2 {
            margin: 25px auto 5px auto;
        }
        /* col row */
        .col-item {
            height: auto;
            min-height: inherit;
        }
        .col-item.n-2 {
            width: 100%;
        }
        .row-item.n-2 {
            height: auto;
            min-height: inherit;
        }
        .row-item.n-3 {
            height: auto;
            min-height: inherit;
        }
        /* photo */
        .photo {
            height: 250px!important;
        }
        /* box table */
        .box-table .box-cell {
            /* display: block;
        vertical-align: inherit; */
        }
        /* box page */
        .box-page {
            width: auto;
            padding: 0 20px;
        }
        /* box inner */
        .box-title {
            padding: 20px 0;
        }
        /* box description */
        .box-description {
            padding: 20px;
        }
        /* navigation works */
        .box-menu-works.fixed nav {
            padding-top: 0;
            padding-left: 40px;
        }
        .box-menu-works {
            width: 100%!important;
            padding: 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            -o-box-sizing: border-box;
            box-sizing: border-box;
        }
        /* navigation secondary */
        .box-page.secondary-experience,
        .box-title,
        .box-table {
            height: auto;
            min-height: inherit;
        }
        /* social icons */
        .social-icons-wrapper-share {
            visibility: hidden;
            display: none;
        }
        /* bottom credits */
        .bottom-credits {
            visibility: hidden;
            display: none;
        }
        /* headers */
        h2.section-title {
            font-size: 40px;
            margin: 0;
            padding: 0 0 0 10px;
        }
        h2.section-title-anurati {
            font-size: 40px;
            margin: -1px 0 2px 0;
            padding: 0 0 0 10px;
        }
        h2.section-news-title {
            font-size: 35px;
            color: #111;
            margin: 0;
            padding: 0 0 25px 0;
        }
        h2.section-news-subtitle {
            font-size: 13px;
            color: #999;
            margin: 0;
            padding: 0;
        }
        h5 {
            padding: 0 0 2px 10px;
        }
        /* hero headings */
        .hero-heading {
            font-size: 40px;
            margin: -3px auto 25px auto;
        }
        .hero-heading-montserrat {
            font-size: 40px;
            margin: -2px auto 23px auto;
        }
        .hero-heading-anurati {
            font-size: 40px;
            margin: 21px auto 24px auto;
        }
        .hero-subheading-top {
            padding-bottom: 4px;
        }
        .hero-txt {
            font-size: 12px;
            margin-top: -4px;
        }
        .hero-txt-play {
            margin-top: 22px;
        }
        .time-hero-txt-play {
            margin-top: -4px;
        }
        /* hero slider owl pagination */
        .hero-slider .owl-pagination {
            bottom: 50px;
        }
        .hero-slider-zoom .owl-pagination {
            bottom: 50px;
        }
        .hero-slider-split .owl-pagination {
            bottom: 50px;
        }
        /* line left */
        .line-left {
            visibility: hidden;
            display: none;
        }
        /* signup form */
        .ex-modal {
            width: -webkit-calc(100% - 40px);
            width: -moz-calc(100% - 40px);
            width: calc(100% - 40px);
            height: -webkit-calc(100% - 40px);
            height: -moz-calc(100% - 40px);
            height: calc(100% - 40px);
            top: 20px;
            left: 20px;
            bottom: 20px;
            right: 20px;
        }
        .ex-modal.show {
            width: -webkit-calc(100% - 40px);
            width: -moz-calc(100% - 40px);
            width: calc(100% - 40px);
            height: -webkit-calc(100% - 40px);
            height: -moz-calc(100% - 40px);
            height: calc(100% - 40px);
            top: 20px;
            left: 20px;
            bottom: 20px;
            right: 20px;
        }
        /* quote */
        .quote {
            text-align: left;
            padding: 13px 0 0 10px;
        }
        /* borders */
        .border-top {
            height: 10px;
        }
        .border-top.top-position {
            top: -10px;
        }
        .border-left {
            width: 10px;
        }
        .border-left.left-position {
            left: -10px;
        }
        .border-right {
            width: 10px;
        }
        .border-right.right-position {
            right: -10px;
        }
        .border-bottom {
            height: 10px;
        }
        .border-bottom.bottom-position {
            bottom: -10px;
        }
        /* alternative borders */
        .alternative-borders {
            visibility: hidden;
            display: none;
        }
        /* services columns */
        .services-columns .border-left-services {
            border-left: none;
        }
        .services-columns .border-top-services:after {
            border-bottom: none;
        }
        .services-padding {
            padding-left: 15px;
        }
        /* testimonials */
        .testimonials {
            height: 100%;
        }
        /* hidden containers */
        .close-hidden-container {
            margin-top: 10px;
        }
        /* TIME STYLE */
        .time-slides-wrapper h3 {
            font-size: 12px;
        }
        .time-heading {
            font-size: 80px;
            margin: 7px auto 0 auto;
        }
        .time-subheading {
            font-size: 12px;
        }
        .time-subheading-play {
            padding-bottom: 15px;
        }
    }
    /* landscape */
    
    @media only screen and (max-width: 640px) and (orientation: landscape) {
        /* photo */
        .photo {
            height: 250px!important;
        }
        /* team */
        .team-photo {
            width: 400px;
        }
        /* mobile experience */
        .mobile-experience #header .logo {
            margin: 15px auto;
        }
    }
    /* 480px */
    
    .hideOnLeftMobile {
        display: block
    }
    
    @media only screen and (max-width: 900px) {
        .hideOnLeftMobile {
            display: none
        }
    }
    /* line right */
    
    .line-right {
        position: fixed;
        visibility: visible;
        display: block;
        width: 325px;
        font-family: 'Dosis', sans-serif;
        letter-spacing: normal;
        font-weight: 400;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 100% 50%;
        -moz-transform-origin: 100% 50%;
        -ms-transform-origin: 100% 50%;
        -o-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        right: 35px;
        top: 50%;
        margin-top: -200px;
        -webkit-transition: all 0.7s;
        -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;
        z-index: 1006;
    }
    
    .line-right.right-position {
        /* -webkit-transform: translateX(200px) rotate(-90deg); */
        -moz-transform: translateX(200px) rotate(-90deg);
        -ms-transform: translateX(200px) rotate(-90deg);
        -o-transform: translateX(200px) rotate(-90deg);
        /* transform: translateX(200px) rotate(-90deg); */
        -webkit-transition: all 0.7s;
        -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;
    }
    
    .line-right a {
        color: #000;
        text-decoration: none;
    }
    
    .line-right a:hover {
        color: #000;
        text-decoration: none;
    }
    /* line left */
    
    .line-left {
        position: fixed;
        visibility: visible;
        display: block;
        width: 325px;
        font-family: 'Dosis', sans-serif;
        letter-spacing: normal;
        font-weight: 400;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        left: 15px;
        top: 50%;
        margin-top: 125px;
        -webkit-transition: all 0.7s;
        -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;
        z-index: 1001;
    }
    
    .line-left.left-position {
        /* -webkit-transform: translateX(-200px) rotate(-90deg); */
        -moz-transform: translateX(-200px) rotate(-90deg);
        -ms-transform: translateX(-200px) rotate(-90deg);
        -o-transform: translateX(-200px) rotate(-90deg);
        /* transform: translateX(-200px) rotate(-90deg); */
        -webkit-transition: all 0.7s;
        -moz-transition: all 0.7s;
        -ms-transition: all 0.7s;
        -o-transition: all 0.7s;
        transition: all 0.7s;
    }
    
    .line-left a {
        color: #000;
        text-decoration: none;
    }
    
    .line-left a:hover {
        color: #000;
        text-decoration: none;
    }
    /* home buttons */
    
    .button-discover-wrap {
        position: fixed;
        bottom: -35px;
        right: 115px;
        width: 170px;
        height: 50px;
        background: none;
        color: #fff;
        line-height: 50px;
    }
    
    .bt-preorder-txt-2 {
        font-family: 'Dosis', sans-serif;
        letter-spacing: normal;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        margin: 0 0 0 -20px;
    }
    
    .button-subscribe-wrap {
        position: fixed;
        bottom: -35px;
        right: 115px;
        width: 170px;
        height: 50px;
        background: none;
        color: #fff;
        line-height: 50px;
    }
    
    .bt-preorder-txt-3 {
        font-family: 'Dosis', sans-serif;
        letter-spacing: normal;
        font-weight: 600;
        text-transform: uppercase;
        text-decoration: none;
        text-align: center;
        font-size: 15px;
        margin: 0 0 0 -20px;
    }
    
    .button-subscribe-wrap:before {
        font-family: FontAwesome;
        font-size: 20px;
        content: '\f1d8';
        display: block;
        float: left;
        width: 50px;
        height: 50px;
        color: #fff;
        background: #111;
        position: absolute;
        right: 170px;
        cursor: pointer;
        z-index: 1;
    }
    
    .button-discover {
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: inline-block;
        outline: none;
        margin: 10px auto 0 auto;
        width: 170px;
        height: 50px;
        bottom: 10px;
        padding: 1px 0 0 0;
        border: none;
        color: #fff;
        background: #111;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    
    .button-discover::before {
        position: absolute;
        content: '';
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        right: -100%;
        bottom: 0%;
        width: 200%;
        height: 200%;
        color: #fff;
        background: #999;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: skewX(-60deg);
        -moz-transform: skewX(-60deg);
        -ms-transform: skewX(-60deg);
        -o-transform: skewX(-60deg);
        transform: skewX(-60deg);
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        z-index: -1;
    }
    
    .button-discover::before {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    .button-discover:hover {
        color: #fff;
        background: #111;
    }
    
    .button-discover:hover::before {
        bottom: -100%;
        right: -200%;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    
    .button-subscribe {
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        display: inline-block;
        outline: none;
        margin: 10px auto 0 auto;
        width: 170px;
        height: 50px;
        bottom: 10px;
        padding: 1px 0 0 0;
        border: none;
        color: #fff;
        background: #111;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    
    .button-subscribe::before {
        position: absolute;
        content: '';
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        right: -100%;
        bottom: 0%;
        width: 200%;
        height: 200%;
        color: #fff;
        background: #999;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: skewX(-60deg);
        -moz-transform: skewX(-60deg);
        -ms-transform: skewX(-60deg);
        -o-transform: skewX(-60deg);
        transform: skewX(-60deg);
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        z-index: -1;
    }
    
    .button-subscribe::before {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    .button-subscribe:hover {
        color: #fff;
        background: #111
    }
    
    .button-subscribe:hover::before {
        bottom: -100%;
        right: -200%;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    /* image hover */
    
    .icon-works {
        position: absolute;
        width: 100%;
        top: 50%;
        text-align: center;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: all 0.35s ease-out;
        -moz-transition: all 0.35s ease-out;
        -ms-transition: all 0.35s ease-out;
        -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        z-index: 1;
    }
    
    .icon-works p {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        text-align: center;
        width: 100%;
        line-height: 44px;
        margin: 0 2px;
        font-size: 20px;
        color: #111;
        -webkit-transition: all 0.35s ease-out;
        -moz-transition: all 0.35s ease-out;
        -ms-transition: all 0.35s ease-out;
        -o-transition: all 0.35s ease-out;
        transition: all 0.35s ease-out;
    }
    
    .icon-works p:hover {
        background: #111;
        border: 1px solid #111;
        color: #fff;
    }
    
    .icon-works p:hover:after {
        background: #111;
    }
    
    .image-works:hover .icon-works {
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    
    .icon-works p:before {
        position: relative;
        z-index: 1;
    }
    
    .icon-works a i {
        position: relative;
        z-index: 1;
    }
    
    .image-works {
        position: relative;
        z-index: 5 !important;
    }
    
    .image-works>.hover-effect {
        position: absolute;
        background: #fff;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transition: opacity 0.35s ease-out;
        -moz-transition: opacity 0.35s ease-out;
        -ms-transition: opacity 0.35s ease-out;
        -o-transition: opacity 0.35s ease-out;
        transition: opacity 0.35s ease-out;
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        width: calc(100% - 20px);
        height: -webkit-calc(100% - 20px);
        height: -moz-calc(100% - 20px);
        height: calc(100% - 20px);
        top: 10px;
        left: 10px;
        bottom: 10px;
        right: 10px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    .image-works:hover .hover-effect {
        opacity: 0.55;
        -moz-opacity: 0.55;
        -webkit-opacity: 0.55;
        filter: alpha(opacity=55);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
    }
    /* filter */
    
    #container {
        margin: auto;
        max-width: 1200px;
    }
    
    .grid-item {
        display: inline-block;
        /* height: 400px; */
        overflow: hidden;
        text-align: center;
        width: 33%;
        margin-bottom: 4px;
        /* border: 2px solid white; */
    }
    
    @media screen and (max-width: 1024px) {
        .grid-item {
            width: 50%;
            padding: 0 15px;
        }
    }
    
    @media screen and (max-width: 640px) {
        .grid-item {
            width: 100%;
        }
        .filters li.active a {
            padding: 10px 5px !important;
        }
        .filters li a {
            padding: 10px 5px !important;
        }
    }
    
    .grid-item img {
        width: 100%;
        height: auto;
        /* filter: url(filters.svg#grayscale); */
        /* filter: gray; */
        /* -webkit-filter: grayscale(1); */
        transition: 0.9s;
    }
    
    .grid-item img:hover {
        filter: none;
    }
    
    .isotope-pager .pager {
        display: inline-block;
    }
    
    .filters {
        width: 100%;
        text-align: center;
        padding-bottom: 25px;
        padding-top: 0px;
        display: flex;
        justify-content: center;
    }
    
    .filters ul {
        list-style: none;
        border-radius: 30px;
        text-align: center;
    }
    
    .filters li {
        display: inline-block;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .filters li a {
        color: #b6b6b6;
        text-decoration: none;
        padding: 10px 25px;
    }
    
    .filters li a:hover {
        color: #fff;
    }
    
    .filters li:hover {
        border-radius: 15px;
    }
    
    .filters li.active a {
        color: #1d1d1d;
        padding: 10px 25px;
    }
    
    .isotope-pager a {
        margin: 6px 1px;
        display: inline-block;
        width: 50px;
        /* height: 60px; */
        line-height: 31px;
        color: #b6b6b6;
        font-weight: 600;
        transition: 0.3s;
        /* position: relative; */
        /* padding-right: 26px; */
        box-shadow: -1px 1px 11px rgba(0, 0, 0, .1);
        border-radius: 25px;
        background-color: #232323;
        border: .5px solid #e3ca66;
        text-decoration: none;
    }
    
    .isotope-pager a:hover {
        color: #fff;
        border: .5px solid #ffeeac;
        box-shadow: -1px 1px 10px 3px rgba(0, 0, 0, .1);
    }
    
    .isotope-pager .active {
        color: #e3ca66 !important;
        box-shadow: -1px 1px 10px 5px rgba(0, 0, 0, .1);
        border-radius: 25px;
        background-color: #161616;
        border: 1px dotted #e3ca66;
    }
    
    .isotope-pager .prev {
        border-radius: 30px 0 0 30px;
    }
    
    .isotope-pager .next {
        border-radius: 0 30px 30px 0;
    }
    
    .isotope-pager a::before,
    .isotope-pager a:after {
        content: "";
        position: absolute;
        border-top: 30px solid transparent;
        border-bottom: 30px solid transparent;
    }
    
    .isotope-pager .num::before,
    .next::before {
        border-right: 20px solid #2c3e50;
        right: 100%;
    }
    
    .isotope-pager .num:after,
    .prev:after {
        border-right: 20px solid #f1f1f1;
        right: 0;
    }
    
    .overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        /* Black see-through */
        color: #f1f1f1;
        width: 100%;
        transition: .5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
    }
    
    .grid-item:hover .overlay {
        opacity: 1;
    }
    /* center container */
    
    .center-container {
        position: relative;
        display: table;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }
    
    .center-block {
        display: table-cell;
        vertical-align: middle;
    }
    /* ex modal */
    
    .ex-modal h6 {
        font-family: 'Montserrat', sans-serif;
        font-size: 25px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.08em;
        color: #111;
        text-align: center;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }
    
    .ex-modal p {
        font-size: 13px;
        color: #111;
        text-align: center;
    }
    
    .ex-modal {
        position: fixed;
        width: -webkit-calc(100% - 120px);
        width: -moz-calc(100% - 120px);
        width: calc(100% - 120px);
        height: -webkit-calc(100% - 160px, 120px, 120px, 120px);
        height: -moz-calc(100% - 160px, 120px, 120px, 120px);
        height: calc(100% - 160px, 120px, 120px, 120px);
        top: 80px;
        left: 60px;
        bottom: 60px;
        right: 60px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        background: #f4f4f2;
        visibility: hidden;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        -webkit-transform: scale(0.75);
        -moz-transform: scale(0.75);
        -ms-transform: scale(0.75);
        -o-transform: scale(0.75);
        transform: scale(0.75);
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
        z-index: 1005;
    }
    
    .ex-modal.show {
        width: -webkit-calc(100% - 120px);
        width: -moz-calc(100% - 120px);
        width: calc(100% - 120px);
        height: -webkit-calc(100% - 160px, 120px, 120px, 120px);
        height: -moz-calc(100% - 160px, 120px, 120px, 120px);
        height: calc(100% - 160px, 120px, 120px, 120px);
        top: 80px;
        left: 60px;
        bottom: 60px;
        right: 60px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        visibility: visible;
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
    /* newsletter form */
    
    #subscribe-wrapper {
        position: relative;
        margin: 2px auto 0 auto;
        background: none;
        width: auto;
        height: 160px;
        text-align: center;
    }
    
    .newsletter {
        position: relative;
        clear: both;
        width: auto;
        border: none;
        background: none;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    
    .newsletter-submit {
        position: relative;
        font-family: 'Dosis', sans-serif;
        font-size: 15px;
        line-height: 1.5;
        font-style: normal;
        text-transform: uppercase;
        text-align: center;
        font-weight: 400;
        letter-spacing: normal;
        display: inline-block;
        outline: none;
        margin: 10px auto 0 auto;
        width: 225px;
        padding: 1px 0 0 0;
        height: 35px;
        border: none;
        color: #fff;
        background: #111;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        overflow: hidden;
        cursor: pointer;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    
    .newsletter-submit::before {
        position: absolute;
        content: '';
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        right: -100%;
        bottom: 0%;
        width: 200%;
        height: 200%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-transform: skewX(-60deg);
        -moz-transform: skewX(-60deg);
        -ms-transform: skewX(-60deg);
        -o-transform: skewX(-60deg);
        transform: skewX(-60deg);
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -ms-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
        z-index: -1;
    }
    
    .newsletter-submit::before {
        background: #999;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    
    .newsletter-submit:hover {
        color: #fff;
        background: #111;
    }
    
    .newsletter-submit:hover::before {
        bottom: -100%;
        right: -200%;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    
    .subscribe-success {
        font-family: 'Dosis', sans-serif;
        font-size: 15px;
        line-height: 1.5;
        font-style: normal;
        text-transform: uppercase;
        text-align: center;
        font-weight: 400;
        letter-spacing: normal;
        color: #111;
        margin: 0 auto;
        padding: 40px 0 0 0;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    #subscribe .subscribe-error {
        font-size: 10px;
        text-transform: uppercase;
        text-align: center;
        color: #5f5f5f;
        display: block;
        margin: 6px auto 0 auto;
        padding: 0;
        letter-spacing: 0.05em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /* input */
    
    .input {
        position: relative;
        display: inline-block;
        margin: 1em;
        max-width: 270px;
        width: calc(100% - 2em);
        vertical-align: top;
        padding: 0;
        margin: 20px 0 0 0;
        text-align: center;
        z-index: 1;
    }
    
    .input__field {
        position: relative;
        display: block;
        float: right;
        padding: 0;
        width: 60%;
        border: none;
        border-radius: 0;
        background: none;
        font-family: 'Raleway', sans-serif;
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        text-transform: none;
        text-align: center;
        line-height: 3.9;
        -webkit-appearance: none;
    }
    
    .input__field:focus {
        outline: none;
    }
    
    .input__label {
        display: inline-block;
        float: right;
        width: 40%;
        height: 55px;
        font-family: 'Raleway', sans-serif;
        font-size: 10px;
        font-style: normal;
        text-transform: uppercase;
        text-align: center;
        font-weight: 400;
        letter-spacing: 1px;
        line-height: 1;
        margin: 0;
        padding: 4px 0 0 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    .input__label-content {
        position: relative;
        display: block;
        padding: 20px 0 20px 0;
        width: 100%;
    }
    
    .input--kuro {
        max-width: 225px;
        margin-bottom: 0;
    }
    
    .input__field--kuro {
        width: 100%;
        background: none;
        color: #111;
        opacity: 0;
        -moz-opacity: 0;
        -webkit-opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        font-weight: normal;
        text-align: center;
        padding: 0;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    
    .input__label--kuro {
        position: absolute;
        left: 0;
        width: 100%;
        color: #111;
        pointer-events: none;
    }
    
    .input__label--kuro::before,
    .input__label--kuro::after {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        border-bottom: 1px solid #111;
        border-top: none;
        border-left: none;
        border-right: none;
        -webkit-transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
    }
    
    .input__label--kuro::before {
        border-right: none;
    }
    
    .input__label--kuro::after {
        left: 50%;
        border-left: none;
    }
    
    .input__field--kuro:focus,
    .input--filled .input__field--kuro {
        opacity: 1;
        -moz-opacity: 1;
        -webkit-opacity: 1;
        filter: alpha(opacity=100);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        -webkit-transition-delay: 0.3s;
        transition-delay: 0.3s;
    }
    
    .input__field--kuro:focus+.input__label--kuro::before,
    .input--filled .input__label--kuro::before {
        -webkit-transform: translate3d(-10%, 0, 0);
        transform: translate3d(-10%, 0, 0);
    }
    
    .input__field--kuro:focus+.input__label--kuro::after,
    .input--filled .input__label--kuro::after {
        -webkit-transform: translate3d(10%, 0, 0);
        transform: translate3d(10%, 0, 0);
    }
    
    .input__field--kuro:focus+.input__label--kuro .input__label-content--kuro,
    .input--filled .input__label-content--kuro {
        -webkit-animation: anim-2 0.3s forwards;
        animation: anim-2 0.3s forwards;
    }
    
    @-webkit-keyframes anim-2 {
        50% {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 1);
            transform: scale3d(0.3, 0.3, 1);
        }
        51% {
            opacity: 0;
            -webkit-transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1);
            transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1);
        }
        100% {
            opacity: 1;
            -webkit-transform: translate3d(0, -3.7em, 0);
            transform: translate3d(0, -3.7em, 0);
        }
    }
    
    @keyframes anim-2 {
        50% {
            opacity: 0;
            -webkit-transform: scale3d(0.3, 0.3, 1);
            transform: scale3d(0.3, 0.3, 1);
        }
        51% {
            opacity: 0;
            -webkit-transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1);
            transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1);
        }
        100% {
            opacity: 1;
            -webkit-transform: translate3d(0, -3.7em, 0);
            transform: translate3d(0, -3.7em, 0);
        }
    }
    /* newsletter field effect */