/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/2476(这个备注仅在演示页面有，源代码里没有)*/@charset "UTF-8";/*    CONTENTS:    01. Common    02. Header    03. Footer    04. Homepage    05. Works    06. Project    07. Studio    08. Journal    09. Contact    10. Responsive    URL: http://www.bootstrapmb.com    */@import url("https://fonts.googleapis.com/css?family=Karla:400,700|Work+Sans:800");/* 01. Common */body {    font-family: "Karla", sans-serif;    margin: 0;}.wrap {    position: relative;    opacity: 0;    -webkit-animation-fill-mode: both;            animation-fill-mode: both;}.container-spacer {    width: 100%;    padding: 0 32px;}h1, h2, h3, h4, h5, h6 {    font-family: "Work Sans", sans-serif;    font-weight: 800;    color: #272838;    margin: 0;    line-height: 1.3;}h1 {    font-size: 64px;    letter-spacing: -1.8px;}h2 {    font-size: 48px;    letter-spacing: -1px;}h3 {    font-size: 32px;    letter-spacing: -0.6px;}h4 {    font-size: 24px;    letter-spacing: -0.4px;}h5 {    font-size: 18px;    letter-spacing: -0.2px;}h6 {    font-size: 16px;    letter-spacing: -0.1px;}p {    color: #3a3b42;    font-size: 24px;    line-height: 1.5;}a {    color: #000fff;    border-bottom: 2px solid rgba(0, 15, 255, .32);    text-decoration: none;    transition: 200ms border-color ease-in-out, 200ms color ease-in-out;}a:hover {    border-color: #000fff;}ul, ol {    font-size: 24px;    line-height: 38px;    color: #3a3b42;    padding: 0 0 0 22px;}.spacer {    padding: 0 80px;}.mar-bot-lg {    margin-bottom: 116px;}.mar-bot-md {    margin-bottom: 100px;}.mar-bot-sm {    margin-bottom: 88px;}.mar-bot-xs {    margin-bottom: 40px;}.mar-top-lg {    margin-top: 110px;}.mar-top-md {    margin-top: 80px;}.mar-top-sm {    margin-top: 60px;}.mar-top-xs {    margin-top: 40px;}.intro {    display: flex;    width: 100%;    align-items: center;    position: relative;    text-align: center;}.intro .intro-image {    width: 100%;}.intro .intro-image img {    width: 100%;}.intro .intro-text {    position: absolute;    left: 0;    width: 100%;    padding: 0 120px;    text-align: center;}.intro .intro-text h1 {    font-size: 140px;    line-height: 154px;}.content-quote {    margin-bottom: 24px;}.content-quote p {    font-size: 36px;    line-height: 50px;    margin: 0;}.content-quote .author {    display: inline-block;    font-size: 16px;    color: #a6a7b5;    margin-top: 30px;}.content-quote .author:before {    content: "—";    margin-right: 8px;}.content-slider {    position: relative;}.content-slider .navigation {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    z-index: 2;}.content-slider .navigation .prev-slide, .content-slider .navigation .next-slide {    position: absolute;    top: 0;    width: 30%;    height: 100%;}.content-slider .navigation .prev-slide {    left: 0;}.content-slider .navigation .prev-slide:hover {    cursor: url("../img/cursors/cursor_previous.png"), auto;    cursor: -webkit-image-set(url("../img/cursors/cursor_previous.png") 1x, url("../img/cursors/cursor_previous@2x.png") 2x),            auto;}.content-slider .navigation .next-slide {    right: 0;}.content-slider .navigation .next-slide:hover {    cursor: url("../img/cursors/cursor_next.png"), auto;    cursor: -webkit-image-set(url("../img/cursors/cursor_next.png") 1x, url("../img/cursors/cursor_next@2x.png") 2x),            auto;}main {    padding-top: 80px;}::-moz-selection {    background: #000fff;    color: #fff;}::selection {    background: #000fff;    color: #fff;}.divider {    display: block;    height: 1px;    background-color: #eaeaee;}.page-intro {    text-align: center;}.page-title {    font-size: 84px;}.page-content h2 {    margin: 32px 0;}.page-content h3 {    margin: 26px 0;}.page-content h4 {    margin: 20px 0;}.page-content h5 {    margin: 16px 0;}.page-content h6 {    margin: 10px 0;}.page-content p {    font-size: 20px;    line-height: 32px;}.page-content p.lead {    font-size: 24px;    line-height: 38px;}.page-content-image {    margin: 12px 0;}.page-content-image img {    width: 100%;}.page-section-title p {    margin-top: 20px;}.text-center {    text-align: center;}.text-left {    text-align: left;}.text-right {    text-align: right;}.social-links ul {    list-style: none;    margin: 0;    padding: 0;}.social-links ul li {    display: inline-block;    margin-right: 18px;}.social-links ul li:last-child {    margin-right: 0;}.social-links ul li a {    display: block;    width: 24px;    height: 24px;    background-repeat: no-repeat;    background-position: center;    border: none;    opacity: .76;    transition: 200ms opacity ease-in-out;}.social-links ul li a:hover {    opacity: 1;}.social-links ul li a.facebook {    background-image: url("../img/social/icon_facebook.svg");}.social-links ul li a.twitter {    background-image: url("../img/social/icon_twitter.svg");}.social-links ul li a.instagram {    background-image: url("../img/social/icon_instagram.svg");}.social-links ul li a.dribbble {    background-image: url("../img/social/icon_dribbble.svg");}.social-links ul li a.behance {    background-image: url("../img/social/icon_behance.svg");}.load-more {    text-align: center;    margin-top: 32px;}.load-more a {    color: #272838;    border-color: rgba(0, 15, 255, 0);}.load-more a:hover {    color: #000fff;    border-color: rgba(0, 15, 255, .32);}::-webkit-input-placeholder {    color: #ccccd4;}:-ms-input-placeholder {    color: #ccccd4;}::-ms-input-placeholder {    color: #ccccd4;}::placeholder {    color: #ccccd4;}.form-field {    border: 1px solid #eaeaee;    padding: 0 24px 24px;    margin: 44px 0;    transition: 200ms border-color ease-in-out;}.form-field.focused {    border-color: #000fff;}.form-field.focused label {    color: #000fff;}.form-field label {    display: inline-block;    font-family: "Work Sans", sans-serif;    font-size: 20px;    font-weight: 800;    letter-spacing: -0.2px;    color: #272838;    padding: 0 8px;    background-color: #fff;    margin-left: -8px;    -webkit-transform: translateY(-50%);            transform: translateY(-50%);    transition: 200ms color ease-in-out;}.form-field input[type="text"], .form-field textarea {    display: block;    width: 100%;    border: none;    margin-top: 8px;    font-family: "Karla", sans-serif;    font-size: 20px;    color: #3a3b42;    outline: none;}@-webkit-keyframes page-in {    0% {        -webkit-transform: translateY(30px);                transform: translateY(30px);        opacity: 0;    }    100% {        -webkit-transform: translateY(0);                transform: translateY(0);        opacity: 1;    }}@keyframes page-in {    0% {        -webkit-transform: translateY(30px);                transform: translateY(30px);        opacity: 0;    }    100% {        -webkit-transform: translateY(0);                transform: translateY(0);        opacity: 1;    }}.page-in {    -webkit-animation-name: page-in;            animation-name: page-in;}@-webkit-keyframes page-out {    0% {        -webkit-transform: translateY(0);                transform: translateY(0);        opacity: 1;    }    100% {        -webkit-transform: translateY(30px);                transform: translateY(30px);        opacity: 0;    }}@keyframes page-out {    0% {        -webkit-transform: translateY(0);                transform: translateY(0);        opacity: 1;    }    100% {        -webkit-transform: translateY(30px);                transform: translateY(30px);        opacity: 0;    }}.page-out {    -webkit-animation-name: page-out;            animation-name: page-out;}/* 02. Header */header {    position: fixed;    top: 0;    left: 0;    width: 100%;    background-color: #fff;    z-index: 999;    transition: 200ms opacity ease-in, 200ms -webkit-transform ease-in;    transition: 200ms transform ease-in, 200ms opacity ease-in;    transition: 200ms transform ease-in, 200ms opacity ease-in, 200ms -webkit-transform ease-in;}header .logo {    display: inline-block;    width: 112px;    height: 16px;    background-image: url("../img/logo.svg");    background-repeat: no-repeat;    border: none;    margin-top: 32px;}header nav {    float: right;}header nav ul {    list-style: none;    margin: 0;    padding: 0;}header nav ul li {    display: inline-block;    padding: 28px 48px 22px 0;    line-height: 1.2;}header nav ul li a, header nav ul li span {    display: block;    position: relative;    font-family: "Work Sans", sans-serif;    font-size: 20px;    font-weight: 800;    letter-spacing: -0.2px;    text-transform: capitalize;    color: #272838;    border-bottom: 2px solid rgba(0, 15, 255, 0);    padding-bottom: 4px;    transition: 200ms color ease-in-out, 200ms border-color ease-in-out;}header nav ul li a:hover, header nav ul li span:hover {    color: #000fff;    cursor: pointer;    border-color: rgba(0, 15, 255, .32);}header nav ul li.current a, header nav ul li.current span {    color: #000fff;    border-color: #000fff;}header nav ul li.current a:after, header nav ul li.current span:after {    -webkit-transform: scaleX(1);            transform: scaleX(1);    -webkit-transform-origin: left center;             transform-origin: left center;}header nav ul li.dropdown {    position: relative;    padding-top: 0;    padding-bottom: 0;}header nav ul li.dropdown ul {    position: absolute;    top: 100%;    left: -16px;    padding: 8px 16px 12px;    background-color: #fff;    visibility: hidden;    opacity: 0;    width: 160px;    z-index: 1;    transition: 160ms opacity ease-in-out, 160ms visibility ease-in-out;}header nav ul li.dropdown ul li {    display: block;    padding: 0;    opacity: 0;    -webkit-transform: translateY(-8px);            transform: translateY(-8px);}header nav ul li.dropdown ul li:nth-child(1) {    transition: none;}header nav ul li.dropdown ul li:nth-child(2) {    transition: none;}header nav ul li.dropdown ul li:nth-child(3) {    transition: none;}header nav ul li.dropdown ul li:nth-child(4) {    transition: none;}header nav ul li.dropdown ul li:nth-child(5) {    transition: none;}header nav ul li.dropdown ul li:nth-child(6) {    transition: none;}header nav ul li.dropdown ul li:nth-child(7) {    transition: none;}header nav ul li.dropdown ul li:nth-child(8) {    transition: none;}header nav ul li.dropdown ul li:nth-child(9) {    transition: none;}header nav ul li.dropdown ul li:nth-child(10) {    transition: none;}header nav ul li.dropdown ul li a {    font-family: "Karla", sans-serif;    font-size: 18px;    font-weight: 400;    padding: 8px 0;    color: #000fff;    border: none;}header nav ul li.dropdown ul li a:after {    display: none;}header nav ul li.dropdown ul li a:hover {    color: #272838;}header nav ul li.dropdown div {    padding-top: 28px;    padding-bottom: 22px;}header nav ul li.dropdown div:hover span {    color: #000fff;    cursor: pointer;    border-color: rgba(0, 15, 255, .32);}header nav ul li.dropdown div:hover ul {    visibility: visible;    opacity: 1;}header nav ul li.dropdown div:hover ul li {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0);}header nav ul li.dropdown div:hover ul li:nth-child(1) {    transition: 200ms 80ms transform ease-in-out, 200ms 80ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(2) {    transition: 200ms 160ms transform ease-in-out, 200ms 160ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(3) {    transition: 200ms 240ms transform ease-in-out, 200ms 240ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(4) {    transition: 200ms 320ms transform ease-in-out, 200ms 320ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(5) {    transition: 200ms 400ms transform ease-in-out, 200ms 400ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(6) {    transition: 200ms 480ms transform ease-in-out, 200ms 480ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(7) {    transition: 200ms 560ms transform ease-in-out, 200ms 560ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(8) {    transition: 200ms 640ms transform ease-in-out, 200ms 640ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(9) {    transition: 200ms 720ms transform ease-in-out, 200ms 720ms opacity ease-in-out;}header nav ul li.dropdown div:hover ul li:nth-child(10) {    transition: 200ms 800ms transform ease-in-out, 200ms 800ms opacity ease-in-out;}header nav ul li.dropdown.current div:hover span {    border-color: #000fff;}header nav ul li:last-child {    padding-right: 0;}header .nav-toggle {    display: none;    position: relative;    float: right;    margin-top: 24px;    font-family: "Work Sans", sans-serif;    font-size: 20px;    font-weight: 800;    letter-spacing: -0.2px;    text-transform: capitalize;    color: #000fff;    border-bottom: 2px solid rgba(0, 15, 255, .32);    padding-bottom: 4px;    transition: 200ms color ease-in-out, 200ms border-color ease-in-out;}header .nav-toggle:hover {    color: #000fff;    cursor: pointer;    border-color: #000fff;}header.hide {    -webkit-transform: translateY(-100%);            transform: translateY(-100%);    opacity: 0;}/* 03. Footer */footer {    background-color: #000fff;    padding: 136px 0;}footer .logo {    display: inline-block;    width: 112px;    height: 16px;    background-image: url("../img/logo_white.svg");    background-repeat: no-repeat;    border: none;}footer .footer-contacts {    text-align: center;}footer .footer-contacts .wrap {    display: inline-block;    text-align: left;}footer .footer-contacts p, footer .footer-contacts a {    color: #fff;    font-size: 18px;    line-height: 28px;    margin: 0;}footer .footer-contacts a {    display: inline-block;    border-color: rgba(255, 255, 255, .32);}footer .footer-contacts a:hover {    border-color: #fff;}footer .footer-contacts .email {    margin: 16px 0;}footer .social-links {    text-align: right;}/* 04. Homepage */#homepage .intro .intro-text h1 {    color: #fff;}/* 05. Works */.works .works-filters {    font-family: "Work Sans", sans-serif;    font-weight: 800;    font-size: 22px;    letter-spacing: -0.2px;    color: #272838;}.works .works-filters .open-filters {    display: inline-block;    color: #000fff;    position: relative;    margin-top: 18px;    border-bottom: 2px solid rgba(0, 15, 255, .32);    padding-bottom: 3px;    transition: 200ms border-color ease-in-out;}.works .works-filters .open-filters:hover {    cursor: pointer;    border-color: #000fff;}.works .works-filters .fullscreen-filters {    display: flex;    position: fixed;    width: 100%;    height: 100%;    top: 0;    left: 0;    background-color: rgba(255, 255, 255, .96);    z-index: 999;    visibility: hidden;    opacity: 0;    transition: 100ms opacity linear, 100ms visibility linear;}.works .works-filters .fullscreen-filters.open {    visibility: visible;    opacity: 1;}.works .works-filters .fullscreen-filters.open ul li {    line-height: 1;    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0);}.works .works-filters .fullscreen-filters.open ul li:nth-child(1) {    transition: 200ms 80ms transform ease-in-out,                200ms 80ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(2) {    transition: 200ms 160ms transform ease-in-out,                200ms 160ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(3) {    transition: 200ms 240ms transform ease-in-out,                200ms 240ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(4) {    transition: 200ms 320ms transform ease-in-out,                200ms 320ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(5) {    transition: 200ms 400ms transform ease-in-out,                200ms 400ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(6) {    transition: 200ms 480ms transform ease-in-out,                200ms 480ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(7) {    transition: 200ms 560ms transform ease-in-out,                200ms 560ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(8) {    transition: 200ms 640ms transform ease-in-out,                200ms 640ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(9) {    transition: 200ms 720ms transform ease-in-out,                200ms 720ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters.open ul li:nth-child(10) {    transition: 200ms 800ms transform ease-in-out,                200ms 800ms opacity ease-in-out,                120ms color ease-in-out;}.works .works-filters .fullscreen-filters .close-filters {    display: inline-block;    position: absolute;    top: 30px;    right: 60px;    border-bottom: 2px solid rgba(0, 15, 255, .32);    padding-bottom: 4px;    color: #000fff;    transition: 200ms color ease-in-out, 200ms border-color ease-in-out;}.works .works-filters .fullscreen-filters .close-filters:hover {    color: #000fff;    cursor: pointer;    border-color: #000fff;}.works .works-filters .fullscreen-filters ul {    width: 100%;    max-width: 1140px;    padding: 0;    margin: auto;    list-style: none;    text-align: center;}.works .works-filters .fullscreen-filters ul li {    display: inline-block;    position: relative;    font-size: 64px;    letter-spacing: -0.8px;    color: #272838;    margin: 36px;    opacity: 0;    -webkit-transform: translateY(-8px);            transform: translateY(-8px);}.works .works-filters .fullscreen-filters ul li.current {    color: #000fff;}.works .works-filters .fullscreen-filters ul li:hover {    cursor: pointer;    color: #000fff;}.works .works-filters .fullscreen-filters ul li span {    display: inline-block;    font-size: 32px;    letter-spacing: -0.6px;    vertical-align: top;    margin-left: 12px;}.works .works-grid {    margin-top: 80px;}.works .work-item {    display: block;    border-bottom: 0;}.works .work-item .work-image {    position: relative;    display: flex;    align-items: center;    justify-content: center;}.works .work-item .work-image img {    width: 100%;}.works .work-item .work-image:after {    content: "";    display: block;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 15, 255, .88);    transition: 300ms opacity ease-in-out;    opacity: 0;}.works .work-item .icon-arrow {    display: block;    margin: auto;    width: 36px;    position: absolute;    z-index: 1;}.works .work-item .icon-arrow:before {    content: "";    position: absolute;    display: block;    width: 100%;    height: 2px;    background-color: #fff;    -webkit-transform-origin: right center;             transform-origin: right center;    -webkit-transform: scaleX(0);            transform: scaleX(0);    transition: 300ms -webkit-transform cubic-bezier(0, .75, .45, 1);    transition: 300ms transform cubic-bezier(0, .75, .45, 1);    transition: 300ms transform cubic-bezier(0, .75, .45, 1),                300ms -webkit-transform cubic-bezier(0, .75, .45, 1);}.works .work-item .icon-arrow:after {    content: "";    display: block;    position: absolute;    right: 0;    top: -4px;    width: 10px;    height: 10px;    border-top: 2px solid #fff;    border-right: 2px solid #fff;    -webkit-transform: rotate(45deg);            transform: rotate(45deg);    opacity: 0;    transition: 300ms opacity ease-in-out 0;}.works .work-item .work-description {    margin-top: 14px;    position: relative;}.works .work-item .work-title {    display: inline;    border-bottom: 2px solid rgba(0, 15, 255, 0);    transition: 200ms border-color ease-in-out, 200ms color ease-in-out;}.works .work-item .work-services {    margin: 0;    padding: 0;    margin-top: 4px;    list-style: none;    font-size: 18px;    color: #a6a7b5;}.works .work-item .work-services li {    display: inline-block;}.works .work-item .work-services li:after {    content: "—";    display: inline-block;    margin-left: 6px;    margin-right: 2px;}.works .work-item .work-services li:last-child:after {    display: none;}.works .work-item:hover .work-image:after {    opacity: 1;}.works .work-item:hover .icon-arrow:before {    -webkit-transform-origin: left center;             transform-origin: left center;    -webkit-transform: scaleX(1);            transform: scaleX(1);}.works .work-item:hover .icon-arrow:after {    opacity: 1;    transition: 300ms opacity ease-in-out 150ms;}.works .work-item:hover .work-title {    color: #000fff;    border-color: rgba(0, 15, 255, .32);}.works.columns-2 .work-item {    width: 46.4%;    margin-bottom: 64px;}.works.columns-2 .works-gutter {    width: 7%;}.works.columns-2 .work-description {    margin-top: 24px;}.works.columns-3 .work-item {    width: 29.7%;    margin-bottom: 56px;}.works.columns-3 .works-gutter {    width: 5.4%;}.works.columns-3 .work-description {    margin-top: 20px;}.works.clean .works-grid {    margin-bottom: 56px;}.works.clean .work-item {    width: 48.9%;    margin-bottom: 24px;}.works.clean .work-item:hover .work-title {    color: #fff;    border-color: rgba(255, 255, 255, .32);    transition: 300ms opacity cubic-bezier(.4, .57, .56, 1), 200ms border-color ease-in-out;    opacity: 1;}.works.clean .work-item:hover .work-title:hover {    border-color: #fff;}.works.clean .work-item:hover .work-services {    opacity: 1;}.works.clean .work-description {    position: absolute;    bottom: 0;    left: 0;    padding: 32px 120px 32px 40px;}.works.clean .work-title {    color: #fff;    border-color: rgba(255, 255, 255, .32);    display: inline;    opacity: 0;    transition: 300ms opacity cubic-bezier(.4, .57, .56, 1);}.works.clean .work-services {    opacity: 0;    color: rgba(255, 255, 255, .72);    transition: 300ms opacity cubic-bezier(.4, .57, .56, 1);}.works.clean .works-gutter {    width: 2.16%;}.works.clean .icon-arrow {    right: 48px;    bottom: 0;}/* 06. Project */.project-intro {    text-align: center;}.project-title {    font-size: 84px;}.project-description {    margin-top: 32px;}.project-services {    list-style: none;    margin: 0;    padding: 0;}.project-services li {    display: inline-block;    font-size: 18px;    color: #a6a7b5;}.project-services li:after {    content: "—";    display: inline-block;    margin-left: 6px;    margin-right: 2px;}.project-services li:last-child:after {    display: none;}.project-image {    margin: 12px 0;}.project-image img {    width: 100%;}.project-content .title {    margin: 20px 0;    word-wrap: break-word;}.project-content p {    font-size: 20px;    line-height: 32px;}.project-content p.lead {    font-size: 24px;    line-height: 38px;}.next-project {    text-align: center;    padding-top: 90px;    padding-bottom: 20px;}.next-project p {    color: #a6a7b5;    margin: 8px 0;}.next-project a {    display: inline;    color: #272838;    border-bottom: 2px solid rgba(0, 15, 255, 0);}.next-project a:hover {    color: #000fff;    border-color: rgba(0, 15, 255, .32);}#project-3 .intro-text h1 {    color: #fff;}#project-3 .project-services li {    color: #000fff;}/* 07. Studio */.studio-services {    margin-top: 56px;}.studio-services h6 {    margin: 0;}.studio-services ul {    list-style: none;    padding: 0;    margin: 18px 0;}.studio-services ul li {    font-size: 20px;    line-height: 32px;    padding: 4px 0;}.studio-member {    margin-bottom: 64px;}.studio-member .name {    margin-top: 20px;}.studio-member .role {    color: #a6a7b5;    font-size: 18px;    margin: 0;}.studio-member:hover .studio-member-photo:after {    opacity: 1;}.studio-member:hover .studio-member-photo .social-links li {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0);}.studio-member:hover .studio-member-photo .social-links li:nth-child(1) {    transition: 160ms 80ms transform ease-in-out, 160ms 80ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(2) {    transition: 160ms 160ms transform ease-in-out, 160ms 160ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(3) {    transition: 160ms 240ms transform ease-in-out, 160ms 240ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(4) {    transition: 160ms 320ms transform ease-in-out, 160ms 320ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(5) {    transition: 160ms 400ms transform ease-in-out, 160ms 400ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(6) {    transition: 160ms 480ms transform ease-in-out, 160ms 480ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(7) {    transition: 160ms 560ms transform ease-in-out, 160ms 560ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(8) {    transition: 160ms 640ms transform ease-in-out, 160ms 640ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(9) {    transition: 160ms 720ms transform ease-in-out, 160ms 720ms opacity ease-in-out;}.studio-member:hover .studio-member-photo .social-links li:nth-child(10) {    transition: 160ms 800ms transform ease-in-out, 160ms 800ms opacity ease-in-out;}.studio-member-photo {    position: relative;    display: flex;    align-items: center;    justify-content: center;}.studio-member-photo:after {    content: "";    position: absolute;    top: 0;    left: 0;    display: block;    width: 100%;    height: 100%;    background-color: rgba(0, 15, 255, .88);    transition: 300ms opacity ease-in-out;    opacity: 0;}.studio-member-photo img {    width: 100%;}.studio-member-photo .social-links {    position: absolute;    display: block;    margin: auto;    z-index: 1;}.studio-member-photo .social-links li {    opacity: 0;    -webkit-transform: translateY(-8px);            transform: translateY(-8px);}.studio-member-photo .social-links li:nth-child(1) {    transition: none;}.studio-member-photo .social-links li:nth-child(2) {    transition: none;}.studio-member-photo .social-links li:nth-child(3) {    transition: none;}.studio-member-photo .social-links li:nth-child(4) {    transition: none;}.studio-member-photo .social-links li:nth-child(5) {    transition: none;}.studio-member-photo .social-links li:nth-child(6) {    transition: none;}.studio-member-photo .social-links li:nth-child(7) {    transition: none;}.studio-member-photo .social-links li:nth-child(8) {    transition: none;}.studio-member-photo .social-links li:nth-child(9) {    transition: none;}.studio-member-photo .social-links li:nth-child(10) {    transition: none;}/* 08. Journal */article {    margin: 32px 0;}article a {    display: block;    border: none;}article .article-image {    position: relative;    display: flex;    align-items: center;    justify-content: center;}article .article-image .icon-eye {    display: block;    margin: auto;    width: 48px;    height: 32px;    position: absolute;    fill: none;    stroke: #fff;    stroke-width: 2px;    stroke-linecap: round;    z-index: 1;    -webkit-transform: translateY(16px);            transform: translateY(16px);    opacity: 0;    transition: 200ms opacity cubic-bezier(.4, .57, .56, 1),                300ms -webkit-transform cubic-bezier(.4, .57, .56, 1);    transition: 300ms transform cubic-bezier(.4, .57, .56, 1),                200ms opacity cubic-bezier(.4, .57, .56, 1);    transition: 300ms transform cubic-bezier(.4, .57, .56, 1),                200ms opacity cubic-bezier(.4, .57, .56, 1),                300ms -webkit-transform cubic-bezier(.4, .57, .56, 1);}article .article-image .icon-eye .outer-oval {    stroke-dasharray: 105;    stroke-dashoffset: 105;    transition: 600ms stroke-dashoffset cubic-bezier(.4, .57, .56, 1);}article .article-image .icon-eye .inner-oval {    stroke-dasharray: 44;    stroke-dashoffset: 44;    transition: 600ms stroke-dashoffset cubic-bezier(.4, .57, .56, 1);}article .article-image img {    width: 100%;}article .article-image:after {    content: "";    display: block;    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: rgba(0, 15, 255, .88);    transition: 300ms opacity cubic-bezier(.4, .57, .56, 1);    opacity: 0;}article .article-text {    margin-top: 18px;}article .article-text .title {    display: inline;    border-bottom: 2px solid rgba(0, 15, 255, 0);    transition: 200ms border-color ease-in-out, 200ms color ease-in-out;}article .article-text p {    font-size: 16px;    line-height: 26px;    margin: 16px 0 12px;}article .article-text .time {    font-size: 14px;    color: #a6a7b5;}article.featured {    position: relative;}article.featured .article-image img {    vertical-align: top;}article.featured .article-image:before {    content: "";    display: block;    width: 100%;    height: 64%;    position: absolute;    left: 0;    bottom: 0;    background: linear-gradient(to top, #272838, rgba(39, 40, 56, 0));    opacity: .64;}article.featured .article-text {    position: absolute;    bottom: 64px;    right: 0;    left: 0;    margin: auto;    max-width: 660px;    text-align: center;    color: #fff;}article.featured .article-text .time {    display: block;    font-size: 18px;    transition: 300ms color ease-in-out;    margin-bottom: 16px;    color: #fff;}article.featured .article-text .title {    display: inline;    color: #fff;    border-bottom: 2px solid rgba(255, 255, 255, 0);    transition: 200ms border-color ease-in-out;}article.featured .article-text p {    display: block;    color: #fff;    font-size: 20px;    line-height: 32px;    margin: 20px 0 0;    transition: 300ms opacity ease-in-out;}article:hover .article-image .icon-eye {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0);}article:hover .article-image .icon-eye .outer-oval,article:hover .article-image .icon-eye .inner-oval {    stroke-dashoffset: 0;}article:hover .article-image .icon-eye .inner-oval {    transition-delay: 260ms;}article:hover .article-image:after {    opacity: 1;}article:hover .article-text .title {    color: #000fff;    border-color: rgba(0, 15, 255, .32);}article:hover.featured .article-text .title {    color: #fff;    border-color: rgba(255, 255, 255, .32);}article:hover.featured .article-text .time,article:hover.featured .article-text p {    color: rgba(255, 255, 255, .72);}article.single .time {    display: inline-block;    font-size: 18px;    color: #a6a7b5;    margin-right: 32px;}article.single .comments-link {    display: inline-block;    font-size: 18px;}article.single .article-title {    margin: 22px 0 0;}article.single .article-content-image {    margin: 60px 0;}article.single .article-content-image img {    width: 100%;}article.single .article-content-image:after {    display: none;}article.single h1, article.single h2, article.single h3, article.single h4,article.single h5, article.single h6 {    margin: 12px 0;}article.single p {    padding: 20px 0;    margin: 0;}article.single ul, article.single ol {    margin: 16px 0;}article.single li {    padding: 12px 0;}article.single .content-quote {    margin: 40px 0;}article.single .article-share {    margin-top: 48px;}article.single .article-share span {    display: inline-block;    color: #a6a7b5;    font-size: 18px;    margin-right: 12px;}article.single .article-share ul {    display: inline-block;    list-style: none;    margin: 0;    padding: 0;}article.single .article-share ul li {    display: inline-block;    margin-right: 16px;    padding: 0;    line-height: 1;}article.single .article-share ul li a {    font-family: "Work Sans", sans-serif;    font-size: 22px;    font-weight: 800;    letter-spacing: -0.2px;    transition: 200ms opacity ease-in-out;}article.single .article-share ul li a.facebook {    color: #3b5998;}article.single .article-share ul li a.twitter {    color: #1da1f2;}article.single .article-share ul li a.linkedin {    color: #0077b5;}article.single .article-share ul li a:hover {    opacity: .72;}article.single .divider {    margin-top: 60px;}article.single .next-article {    text-align: center;    padding-top: 48px;    padding-bottom: 24px;}article.single .next-article p {    color: #a6a7b5;    margin: 16px 0;    padding: 0;}article.single .next-article a {    display: inline;    color: #272838;    border-bottom: 2px solid rgba(0, 15, 255, 0);}article.single .next-article a:hover {    color: #000fff;    border-color: rgba(0, 15, 255, .32);}.articles-list {    margin-bottom: 40px;}#article-comments .comments-list {    margin-top: 88px;}#article-comments .comment-block {    margin: 30px 0 18px;    padding: 12px 0;}#article-comments .comment-block .userpic {    width: 64px;    height: 64px;    border-radius: 50%;    overflow: hidden;    float: left;    margin-right: 32px;}#article-comments .comment-block .userpic img {    width: 100%;}#article-comments .comment-block .content {    overflow: hidden;}#article-comments .comment-block .content .author-name {    font-size: 20px;    letter-spacing: -0.1px;}#article-comments .comment-block .content .time {    display: inline-block;    font-size: 16px;    color: #a6a7b5;}#article-comments .comment-block .content .comment-text {    font-size: 20px;    line-height: 32px;    margin: 20px 0 14px;}#article-comments .comment-block .content .reply-link {    display: inline-block;    border-bottom: 2px solid rgba(0, 15, 255, 0);    padding-bottom: 2px;    -webkit-transform: translateY(-4px);            transform: translateY(-4px);    opacity: 0;    transition: 200ms border-color ease-in-out,                160ms opacity cubic-bezier(.4, .57, .56, 1),                160ms -webkit-transform cubic-bezier(.4, .57, .56, 1);    transition: 200ms border-color ease-in-out,                160ms transform cubic-bezier(.4, .57, .56, 1),                160ms opacity cubic-bezier(.4, .57, .56, 1);    transition: 200ms border-color ease-in-out,                160ms transform cubic-bezier(.4, .57, .56, 1),                160ms opacity cubic-bezier(.4, .57, .56, 1),                160ms -webkit-transform cubic-bezier(.4, .57, .56, 1);}#article-comments .comment-block .content .reply-link:hover {    border-color: rgba(0, 15, 255, .32);}#article-comments .comment-block.reply {    margin-left: 96px;    margin-top: 0;    padding-top: 0;}#article-comments .comment-block:hover .content .reply-link {    opacity: 1;    -webkit-transform: translateY(0);            transform: translateY(0);}#article-comments .comment-leave {    margin-top: 88px;}#article-comments .comment-leave form {    margin-top: 64px;}#article-comments .comment-leave form .form-field textarea {    width: 100%;    max-width: 100%;    height: 200px;    resize: none;}#article-comments .comment-leave form .form-field:last-child {    margin-bottom: 0;}#article-comments .comment-leave form #comment-submit {    font-family: "Work Sans", sans-serif;    font-size: 26px;    letter-spacing: -0.2px;    font-weight: 800;    color: #000fff;    padding: 0 0 2px;    border: none;    border-bottom: 2px solid rgba(0, 15, 255, 0);    transition: 200ms border-color ease-in-out;    float: right;    background-color: transparent;}#article-comments .comment-leave form #comment-submit:hover {    cursor: pointer;    border-color: rgba(0, 15, 255, .32);}/* 09. Contact */#contact-form {    margin-top: 68px;}#contact-form p {    font-size: 32px;    line-height: 3;    text-align: center;}#contact-form input[type="text"], #contact-form select {    display: inline-block;    width: 232px;    font-family: "Karla", sans-serif;    font-size: 32px;    color: #3a3b42;    border: 1px solid transparent;    background-color: #eaeaee;    outline: none;    padding: 16px;    margin: 0 10px;    transition: 200ms border-color ease-in-out, 200ms background-color ease-in-out;}#contact-form input[type="text"].error, #contact-form select.error {    border-color: #ff3b71;    background-color: transparent;}#contact-form input[type="text"]:focus {    border-color: #a6a7b5;    background-color: transparent;}#contact-form select {    width: 256px;    border-radius: 0;    -webkit-appearance: none;       -moz-appearance: none;            appearance: none;}#contact-form select option:first-of-type {    color: #000fff;}#contact-form .select {    display: inline-block;    position: relative;}#contact-form .select:after {    content: "";    position: absolute;    top: 50%;    -webkit-transform: translateY(-50%);            transform: translateY(-50%);    right: 28px;    display: block;    width: 0;    height: 0;    border-style: solid;    border-width: 7px 6px 0 6px;    border-color: #272838 transparent transparent transparent;}#contact-form #contact-email {    max-width: 395px;    width: 100%;}#contact-form .submit-button {    text-align: center;}#contact-form #contact-submit {    display: inline-block;    font-family: "Work Sans", sans-serif;    font-size: 48px;    letter-spacing: -0.6px;    font-weight: 800;    color: #000fff;    padding: 0 0 2px;    margin-top: 16px;    border: none;    border-bottom: 2px solid rgba(0, 15, 255, 0);    transition: 200ms border-color ease-in-out;    background-color: transparent;}#contact-form #contact-submit:hover {    cursor: pointer;    border-color: rgba(0, 15, 255, .32);}#contact-form #contact-response {    display: none;    text-align: center;    margin-top: 20px;    transition: 200ms opacity ease-in-out;}#contact-form #contact-response p {    display: inline-block;    font-size: 24px;    line-height: 38px;    color: #11b683;    background-color: #e9f8f4;    padding: 14px 24px;}#contact-form #contact-response.error {    color: #ff3b71;    background-color: #ffedf2;}/* 10. Responsive */@media screen and (max-width: 1024px) {    .spacer {        padding: 0 24px;    }    .intro .intro-text {        padding: 0 64px;    }    .intro .intro-text h1 {        font-size: 88px;        line-height: 1.3;    }    header {        height: 80px;    }    header nav {        display: flex;        position: fixed;        top: 0;        left: 0;        width: 100%;        height: 100%;        background-color: #fff;        text-align: center;        overflow-y: scroll;        padding-top: 32px;        opacity: 0;        visibility: hidden;        transition: 100ms opacity linear, 100ms visibility linear;    }    header nav ul {        margin: auto;    }    header nav ul li {        display: block;        padding: 16px 0;    }    header nav ul li a, header nav ul li span {        display: inline-block;        font-size: 48px;        letter-spacing: -0.6px;    }    header nav ul li.dropdown span {        position: relative;    }    header nav ul li.dropdown span:after {        content: "";        position: absolute;        top: 50%;        -webkit-transform: translateY(-50%);                transform: translateY(-50%);        right: -30px;        display: block;        width: 0;        height: 0;        border-style: solid;        border-width: 5px 5px 0 5px;        border-color: #272838 transparent transparent transparent;    }    header nav ul li.dropdown.current span:after {        border-color: #000fff transparent transparent transparent;    }    header nav ul li.dropdown ul {        display: none;        position: static;        width: 100%;        visibility: visible;        opacity: 1;        padding-bottom: 0;    }    header nav ul li.dropdown ul li {        opacity: 1;        -webkit-transform: translateY(0);                transform: translateY(0);    }    header nav ul li.dropdown ul li a {        font-size: 28px;    }    header.nav-responsive nav {        opacity: 1;        visibility: visible;    }    header.nav-responsive.hide {        opacity: 1;        -webkit-transform: none;                transform: none;    }    header .nav-toggle {        display: inline-block;    }    #article-comments .comment-block .content {        overflow: visible;    }    #article-comments .comment-block .content .comment-text {        margin-top: 32px;    }    #article-comments .comment-block.reply {        margin-left: 48px;    }}@media screen and (max-width: 768px) {    .mar-bot-lg {        margin-bottom: 84px;    }    .mar-bot-md {        margin-bottom: 68px;    }    .mar-bot-sm {        margin-bottom: 56px;    }    .mar-top-lg {        margin-top: 84px;    }    .mar-top-md {        margin-top: 68px;    }    .mar-top-sm {        margin-top: 56px;    }    header nav ul li {        display: block;        padding: 14px 0;    }    header nav ul li a, header nav ul li span {        font-size: 36px;        letter-spacing: -0.4px;    }    header nav ul li.dropdown div {        padding: 14px 0;    }    header nav ul li.dropdown ul li a {        font-size: 22px;    }    .content-quote p {        font-size: 28px;        line-height: 1.3;        padding: 0;    }    .content-quote .author {        margin-top: 24px;    }    .works .works-filters .fullscreen-filters ul li {        font-size: 48px;        letter-spacing: -0.6px;        margin: 24px;    }    .works.columns-3 .work-item {        margin-bottom: 40px;    }    .works.columns-3 .work-title {        font-size: 20px;    }    .works.clean .work-description {        padding: 14px 26px;    }    .works.clean .work-title {        font-size: 26px;        line-height: 36px;        letter-spacing: -0.2px;    }    .works.clean .icon-arrow {        display: none;    }    .page-content h2 {        margin: 24px 0;    }    .page-content h3 {        margin: 18px 0;    }    .page-content h4 {        margin: 14px 0;    }    .page-content h5 {        margin: 10px 0;    }    .page-content h6 {        margin: 8px 0;    }    .studio-member .role {        margin-top: 6px;    }    .load-more {        margin-top: 0;    }    footer {        padding: 88px 0;    }    .articles-list {        margin-bottom: 0;    }    article {        margin: 0;        margin-bottom: 40px;    }    article .article-text {        margin-top: 20px;    }    article .article-text .title {        font-size: 20px;    }    article.featured .article-text {        max-width: 100%;        width: 100%;        bottom: 32px;    }    article.featured .article-text .title {        font-size: 32px;        line-height: 44px;        letter-spacing: -0.4px;    }    article.single .article-content-image {        margin: 40px 0;    }    #contact-form {        margin-top: 56px;    }    #contact-form p {        font-size: 24px;    }    #contact-form input[type="text"], #contact-form select {        width: 190px;        font-size: 24px;        padding: 12px;    }    #contact-form #contact-email {        width: 300px;    }    #contact-form #contact-submit {        font-size: 40px;    }}@media screen and (max-width: 425px) {    h1 {        font-size: 50px;    }    h2 {        font-size: 34px;    }    h3 {        font-size: 28px;    }    h4 {        font-size: 20px;    }    h5 {        font-size: 16px;    }    h6 {        font-size: 13px;    }    p {        font-size: 20px;    }    ul, ol {        font-size: 20px;        line-height: 1.5;        color: #3a3b42;        padding: 0 0 0 22px;    }    .mar-bot-lg {        margin-bottom: 60px;    }    .mar-bot-md {        margin-bottom: 44px;    }    .mar-bot-sm {        margin-bottom: 32px;    }    .mar-bot-xs {        margin-bottom: 20px;    }    .mar-top-lg {        margin-top: 60px;    }    .mar-top-md {        margin-top: 44px;    }    .mar-top-sm {        margin-top: 32px;    }    .mar-top-xs {        margin-top: 20px;    }    header {        height: 60px;    }    header .logo {        margin-top: 24px;    }    header .nav-toggle {        margin-top: 18px;    }    main {        padding-top: 60px;    }    .spacer {        padding: 0 15px;    }    .intro .intro-text {        padding: 0 24px;    }    .intro .intro-text h1 {        font-size: 50px;    }    .works .works-grid {        margin-top: 60px;    }    .works .works-filters .fullscreen-filters ul li {        display: block;        font-size: 36px;        letter-spacing: -0.4px;        margin: 30px 0;    }    .works .works-filters .fullscreen-filters ul li span {        font-size: 20px;        margin-left: 8px;    }    .works.columns-2 .work-item, .works.columns-3 .work-item,    .works.clean .work-item {        width: 100%;        margin-bottom: 32px;    }    .works.columns-2 .works-gutter, .works.columns-3 .works-gutter,    .works.clean .works-gutter {        width: 0;    }    .works.columns-2 .work-description, .works.columns-3 .work-description,    .works.clean .work-description {        margin-top: 14px;    }    .works.columns-2 .work-title, .works.columns-3 .work-title,    .works.clean .work-title {        font-size: 26px;        line-height: 36px;        letter-spacing: -0.2px;    }    .project-title {        font-size: 50px;    }    .project-content .title {        margin: 0;    }    .project-content p.lead {        font-size: 20px;        line-height: 1.5;    }    .next-project {        padding-top: 40px;    }    .page-title {        font-size: 50px;    }    .page-content h2, .page-content h4 {        margin: 0;    }    .page-content p.lead {        font-size: 22px;        line-height: 1.5;    }    .studio-services {        margin-top: 32px;    }    .studio-services ul {        margin: 12px 0;    }    .studio-services ul li {        font-size: 18px;        line-height: 1.3;    }    .studio-member {        margin-bottom: 48px;    }    footer .footer-contacts {        margin: 48px 0;        text-align: left;    }    footer .social-links {        text-align: left;    }    article.featured .article-text {        bottom: 24px;    }    article.featured .article-text .title {        font-size: 26px;        line-height: 36px;        letter-spacing: -0.2px;    }    article.featured .article-text p {        display: none;    }    article.single p {        padding: 12px 0;    }    article.single .content-quote {        margin: 24px 0;    }    article.single .content-quote p {        padding: 0;    }    article.single .content-quote .author {        margin-top: 18px;    }    article.single .article-share {        margin-top: 24px;    }    article.single .article-share span {        margin-bottom: 8px;    }    article.single .next-article {        padding-top: 32px;        padding-bottom: 18px;    }    #article-comments .comments-list, #article-comments .comment-leave {        margin-top: 32px;    }    #article-comments .comment-block {        margin: 24px 0 12px;    }    #article-comments .comment-block .content .comment-text {        font-size: 18px;        line-height: 1.5;        margin-top: 40px;    }    #contact-form {        margin-top: 32px;    }    #contact-form p {        text-align: left;        font-size: 20px;    }    #contact-form input[type="text"], #contact-form select {        width: 170px;        font-size: 20px;        padding: 12px;    }    #contact-form #contact-email {        width: 240px;    }    #contact-form #contact-submit {        font-size: 40px;    }    #contact-response p {        font-size: 20px;        line-height: 1.5;    }}/*：此代码只作为演示用,不是源代码。源码地址唯一出处: http://www.bootstrapmb.com/item/2476(这个备注仅在演示页面有，源代码里没有)*/