/*
	Contents:
	1. Google Fonts Import
	2. Common Styles
	3. Sidebar
	4. Main
	5. Works Grid
	6. Index Page
	7. Project Page
	8. About Page
	9. Blog Page
	10. Blog Single
	11. Contact Page
	12. Responsive
*/

/*
	1. Google Fonts Import
*/
@import 'https://fonts.googleapis.com/css?family=Roboto:300,400';
@import 'https://fonts.googleapis.com/css?family=Lora:400,400italic';

/*
	2. Common Styles
*/

body {
    font-family: 'Roboto', 'Tahoma', 'Arial', sans-serif;
    font-weight: 300;
}

.mobile-only {
    display: none;
}

.global-outer {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    position: relative;
    animation-fill-mode: both;
}

.global-outer .global-inner {
    padding: 60px;
    overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 1.8;
    color: #0e0e0e;
    font-family: 'Lora', serif;
}

h1 {
    font-size: 28px;
    line-height: 40px;
}

h1.no-top-margin {
    margin-top: 0;
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 12px;
}

p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}

p.lead {
    font-size: 19px;
}

a {
    color: #48ba86;
    border-bottom: 1px solid rgba(72, 186, 134, 0);
    padding-bottom: 1px;
    transition: color 200ms, border-color 200ms;
}

a:hover, a:active, a:focus {
    color: #32845e;
    text-decoration: none;
    border-color: rgba(72, 186, 134, .3);
}

a:focus {
    outline: none;
}

a.para {
    color: #333;
}

a.para:hover, a.para:active, a.para:focus {
    color: #32845e;
    text-decoration: none;
    border-color: rgba(72, 186, 134, .3);
}

ul {
    font-size: 15px;
    color: #333;
}

blockquote {
    font-size: 18px;
    font-family: 'Lora';
    font-style: italic;
    line-height: 2;
    padding-top: 15px;
    padding-bottom: 15px;
    color: rgba(51, 51, 51, .7);
}

input, textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none;
    background-color: rgba(0, 0, 0, .04);
    padding: 10px;
    font-size: 13px;
    border-radius: 2px;
    border-bottom: 1px solid transparent;
    transition: background-color 200ms, border-color 300ms, border-radius 100ms;
    box-sizing: border-box;
}

input:focus, textarea:focus {
    background-color: #fff;
    border-radius: 0;
    border-color: rgba(0, 0, 0, .08);
}

.btn {
    display: inline-block;
    text-align: center;
    margin: auto;
    background-color: #48ba86;
    color: #fff;
    font-size: 13px;
    border-radius: 2px;
    padding: 8px 14px;
    transition: background-color 200ms;
}

.btn:hover {
    background-color: #39966c;
    color: #fff;
}

.btn:active {
    background-color: #32845e;
}

.btn:focus {
    color: #fff;
}

.btn.small {
    padding: 5px 10px;
}

.btn.large {
    padding: 12px 18px;
}

::-moz-selection {
    background-color: #48ba86;
    color: #fff;
}

::selection {
    background-color: #48ba86;
    color: #fff;
}

.carousel {
    position: relative;
    overflow: hidden;
}

.carousel:after {
    content: '';
    position: absolute;
    bottom: -55px;
    left: 0;
    display: block;
    width: 100%;
    height: 55px;
    box-shadow: inset 0 -50px 50px -50px rgba(0, 0, 0, .5);
    transition: bottom 300ms;
}

.carousel .carousel-indicators {
    bottom: 0;
}

.carousel .carousel-indicators li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin: 0 3px;
    border: 1px solid #999;
    overflow: hidden;
    transform: translateY(100%);
    opacity: 0;
}

.carousel .carousel-indicators li:nth-child(1) {
    transition: transform 200ms 100 ms, opacity 200ms 100 ms;
}

.carousel .carousel-indicators li:nth-child(2) {
    transition: transform 200ms 200 ms, opacity 200ms 200 ms;
}

.carousel .carousel-indicators li:nth-child(3) {
    transition: transform 200ms 300 ms, opacity 200ms 300 ms;
}

.carousel .carousel-indicators li:nth-child(4) {
    transition: transform 200ms 400 ms, opacity 200ms 400 ms;
}

.carousel .carousel-indicators li:nth-child(5) {
    transition: transform 200ms 500 ms, opacity 200ms 500 ms;
}

.carousel .carousel-indicators li:nth-child(6) {
    transition: transform 200ms 600 ms, opacity 200ms 600 ms;
}

.carousel .carousel-indicators li:nth-child(7) {
    transition: transform 200ms 700 ms, opacity 200ms 700 ms;
}

.carousel .carousel-indicators li:nth-child(8) {
    transition: transform 200ms 800 ms, opacity 200ms 800 ms;
}

.carousel .carousel-indicators li:nth-child(9) {
    transition: transform 200ms 900 ms, opacity 200ms 900 ms;
}

.carousel .carousel-indicators li:nth-child(10) {
    transition: transform 200ms 1000 ms, opacity 200ms 1000 ms;
}

.carousel .carousel-indicators li:nth-child(11) {
    transition: transform 200ms 1100 ms, opacity 200ms 1100 ms;
}

.carousel .carousel-indicators li:nth-child(12) {
    transition: transform 200ms 1200 ms, opacity 200ms 1200 ms;
}

.carousel .carousel-indicators li:nth-child(13) {
    transition: transform 200ms 1300 ms, opacity 200ms 1300 ms;
}

.carousel .carousel-indicators li:nth-child(14) {
    transition: transform 200ms 1400 ms, opacity 200ms 1400 ms;
}

.carousel .carousel-indicators li:nth-child(15) {
    transition: transform 200ms 1500 ms, opacity 200ms 1500 ms;
}

.carousel .carousel-indicators li:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #999;
    transition: width 300ms;
}

.carousel .carousel-indicators li.active {
    width: 10px;
    height: 10px;
    background-color: transparent;
}

.carousel .carousel-indicators li.active:before {
    width: 100%;
}

.carousel .carousel-indicators li:hover:before {
    width: 100%;
}

.carousel:hover:after {
    bottom: 0;
}

.carousel:hover .carousel-indicators li {
    transform: translateY(0);
    opacity: 1;
}

.image-source-link {
    color: #98c3d1;
}

.mfp-with-zoom.mfp-container, .mfp-with-zoom.mfp-bg {
    opacity: 0;
    transition: all 300ms ease-out;
    backface-visibility: hidden;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: .8;
}

.mfp-with-zoom.mfp-removing .mfp-container {
    opacity: 0;
}

.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}

.page-title h1 {
    margin: 0;
    line-height: 1;
}

.page-title p {
    margin-top: 25px;
}

.page-title .page-title-image {
    margin-top: 30px;
}

.page-title .page-title-image img {
    width: 100%;
}

/*
	3. Sidebar
*/

#sidebar {
    width: 25%;
    float: left;
    overflow: hidden;
}

#sidebar .sidebar-inner {
    padding-right: 30px;
}

#sidebar .intro {
    font-family: 'Lora', serif;
    font-size: 24px;
    margin-top: 0;
}

#sidebar .logo {
    display: inline-block;
    margin-bottom: 30px;
    padding: 0;
    border: none;
}

#sidebar nav {
    padding: 25px 0 10px;
    color: #0e0e0e;
}

#sidebar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sidebar nav ul li a, #sidebar nav ul li span {
    display: inline-block;
    padding: 6px 0;
    color: #0e0e0e;
    text-decoration: none;
    transition: color 100ms;
    border: none;
    font-weight: 300;
}

#sidebar nav ul li a.current, #sidebar nav ul li span.current {
    color: #48ba86;
}

#sidebar nav ul li a:hover, #sidebar nav ul li span:hover {
    color: #48ba86;
    cursor: pointer;
}

#sidebar nav ul li a:hover:before, #sidebar nav ul li span:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown span {
    position: relative;
}

#sidebar nav ul li.dropdown span:after, #sidebar nav ul li.dropdown span:before {
    content: '';
    position: absolute;
    top: 2px;
    right: 0;
    bottom: 0;
    margin: auto -13px auto auto;
    display: inline-block;
    width: 7px;
    height: 1px;
    background-color: #0e0e0e;
    transition: transform 200ms, background-color 100ms;
}

#sidebar nav ul li.dropdown span:before {
    margin-right: -10px;
    width: 1px;
    height: 7px;
}

#sidebar nav ul li.dropdown span.current:after,
#sidebar nav ul li.dropdown span.current:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown span:hover:after,
#sidebar nav ul li.dropdown span:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown ul {
    display: none;
}

#sidebar nav ul li.dropdown ul li {
    transform: translateY(-10px);
    opacity: 0;
}

#sidebar nav ul li.dropdown ul li:nth-child(1) {
    transition: transform 400ms 100 ms, opacity 200ms 100 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(2) {
    transition: transform 400ms 200 ms, opacity 200ms 200 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(3) {
    transition: transform 400ms 300 ms, opacity 200ms 300 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(4) {
    transition: transform 400ms 400 ms, opacity 200ms 400 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(5) {
    transition: transform 400ms 500 ms, opacity 200ms 500 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(6) {
    transition: transform 400ms 600 ms, opacity 200ms 600 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(7) {
    transition: transform 400ms 700 ms, opacity 200ms 700 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(8) {
    transition: transform 400ms 800 ms, opacity 200ms 800 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(9) {
    transition: transform 400ms 900 ms, opacity 200ms 900 ms;
}

#sidebar nav ul li.dropdown ul li:nth-child(10) {
    transition: transform 400ms 1000 ms, opacity 200ms 1000 ms;
}

#sidebar nav ul li.dropdown ul li a {
    font-size: 13px;
}

#sidebar nav ul li.dropdown ul li a:before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1px;
    background-color: #0e0e0e;
    margin-bottom: 4px;
    margin-right: 6px;
    transition: background-color 100ms;
}

#sidebar nav ul li.dropdown ul li a.current:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown ul li a:hover:before {
    background-color: #48ba86;
}

#sidebar nav ul li.dropdown.expanded span:before {
    transform: rotate(90deg);
}

#sidebar nav ul li.dropdown.expanded ul li {
    transform: translateY(0);
    opacity: 1;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(1) {
    transition: transform 200ms 100 ms, opacity 200ms 100 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(2) {
    transition: transform 200ms 200 ms, opacity 200ms 200 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(3) {
    transition: transform 200ms 300 ms, opacity 200ms 300 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(4) {
    transition: transform 200ms 400 ms, opacity 200ms 400 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(5) {
    transition: transform 200ms 500 ms, opacity 200ms 500 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(6) {
    transition: transform 200ms 600 ms, opacity 200ms 600 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(7) {
    transition: transform 200ms 700 ms, opacity 200ms 700 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(8) {
    transition: transform 200ms 800 ms, opacity 200ms 800 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(9) {
    transition: transform 200ms 900 ms, opacity 200ms 900 ms;
}

#sidebar nav ul li.dropdown.expanded ul li:nth-child(10) {
    transition: transform 200ms 1000 ms, opacity 200ms 1000 ms;
}

#sidebar .basket-open {
    position: absolute;
    top: 10px;
    right: 20px;
    border-bottom: none;
}

#sidebar .basket-open .cart-indicator {
    position: relative;
    overflow: hidden;
}

#sidebar .basket-open .cart-indicator i {
    font-size: 16px;
    color: #aaa;
    transition: color 200ms;
}

#sidebar .basket-open .cart-indicator span {
    position: absolute;
    top: -5px;
    right: -12px;
    display: block;
    width: 16px;
    height: 16px;
    background-color: #48ba86;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    padding-top: 2px;
}

#sidebar .basket-open:hover .cart-indicator i {
    color: #333;
}

#sidebar .copyright {
    padding-top: 20px;
    color: #aaa;
    font-size: 13px;
}

#sidebar .widgets-block {
    margin: 50px 0;
}

/*
	4. Main
*/

#main {
    float: left;
    overflow: hidden;
    width: 75%;
}

#main .main-outer {
    overflow: hidden;
    padding-left: 30px;
}

/*
	5. Works Grid
*/

#works-grid {
    overflow: hidden;
}

#works-grid .gutter {
    width: 2.35%;
}

#works-grid .works-item {
    display: block;
    position: relative;
    overflow: hidden;
    border: none;
    width: 31.75%;
    margin-bottom: 2.35%;
    padding-bottom: 0;
    z-index: 3;
}

#works-grid .works-item .picture {
    position: relative;
}

#works-grid .works-item .picture .content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 2;
}

#works-grid .works-item .picture .content .text {
    padding: 20px;
    text-align: center;
    opacity: 0;
    transition: transform 250ms, opacity 100ms;
}

#works-grid .works-item .picture .content .text h2 {
    color: #fff;
    margin: 0 auto;
    padding: 0;
    font-size: 19px;
    line-height: 1.5;
    max-width: 300px;
}

#works-grid .works-item .picture .content .text ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#works-grid .works-item .picture .content .text ul li {
    display: inline;
    color: rgba(255, 255, 255, .8);
    font-size: 11px;
    font-weight: 400;
}

#works-grid .works-item .picture .content .text ul li:after {
    content: '—';
    margin-left: 3px;
}

#works-grid .works-item .picture .content .text ul li:last-child:after {
    content: '';
    margin: 0;
}

#works-grid .works-item .picture img {
    width: 100%;
}

#works-grid .works-item .picture:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 250ms;
    opacity: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 1;
}

#works-grid .works-item:hover .picture .content .text {
    transform: scale(1);
    opacity: 1;
}

#works-grid .works-item:hover .picture:before {
    opacity: 1;
}

#works-grid.columns-2 .works-item {
    width: 48.825%;
}

#works-grid.columns-4 .works-item {
    width: 23.2375%;
}

/*
	6. Index Page
*/

#index-page #main .load-more {
    margin-top: 30px;
    text-align: center;
}

/*
	7. Project Page
*/

#main .title-image img {
    width: 100%;
}

#main .gallery a {
    display: block;
    margin-bottom: 20px;
    border-bottom: none;
}

#main .gallery a img {
    width: 100%;
}

#main .description {
    margin: 50px 0;
}

#main .description h1 {
    margin: 0 0 20px 0;
}

#main .description p {
    font-size: 15px;
    margin: 10px 0 20px;
}

#main .description .categories {
    list-style: none;
    margin: -5px 0 35px;
    padding: 0;
}

#main .description .categories li {
    display: inline;
    color: #aaa;
    font-size: 13px;
    font-weight: 300;
    margin-right: 3px;
}

#main .description .categories li:after {
    content: '—';
    margin-left: 5px;
}

#main .description .categories li:last-child {
    margin-right: 0;
}

#main .description .categories li:last-child:after {
    content: '';
    margin-left: 0;
}

#main .description .subtitle {
    margin: 50px 0 0;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-weight: 400;
    color: #0e0e0e;
    font-family: Roboto;
}

#main .details {
    margin: 50px 0 30px;
    padding: 15px 30px;
}

#main .details ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main .details ul li {
    color: #aaa;
    margin: 10px 0;
    padding: 5px 0;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
    font-weight: 400;
}

#main .details ul li:first-child {
    margin-top: 0;
    padding-top: 0;
}

#main .details ul li:last-child {
    margin-bottom: 0;
}

#main .details ul li span {
    display: block;
    color: #333;
    margin-top: 2px;
    text-transform: none;
    font-size: 13px;
    font-weight: 400;
}

#main .project-image {
    position: relative;
    margin-top: 30px;
}

#main .project-image .caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    display: inline-block;
    background-color: rgba(255, 255, 255, .9);
    border-radius: 2px;
    font-size: 13px;
    padding: 4px 12px;
    transform: scale(1.2);
    opacity: 0;
    transition: transform 250ms, opacity 100ms;
}

#main .project-image img {
    width: 100%;
}

#main .project-image:hover .caption {
    transform: scale(1);
    opacity: 1;
}

#main .carousel .item img {
    width: 100%;
}

#main .end-page {
    margin-top: 50px;
    overflow: hidden;
    /*.share-block
      text-align center
      margin 3px 0 20px 0

      ul
        list-style none
        margin auto
        padding 0

        li
          display inline-block

          a
            display block
            padding 5px
            color $grey
            border none
            font-size 14px

            &:hover
              color $main*/
}

#main .end-page .projects-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#main .end-page .projects-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #aaa;
    transition: transform 300ms, background-color 300ms;
}

#main .end-page .projects-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: border-color 300ms;
}

#main .end-page .projects-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #aaa;
}

#main .end-page .projects-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #aaa;
}

#main .end-page .projects-navigation.previous-project {
    float: left;
}

#main .end-page .projects-navigation.next-project {
    float: right;
}

#main .end-page .projects-navigation:hover .arrow {
    background-color: #48ba86;
}

#main .end-page .projects-navigation:hover .arrow.arrow-left {
    transform: translateX(-20px);
}

#main .end-page .projects-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#main .end-page .projects-navigation:hover .arrow.arrow-right {
    transform: translateX(20px);
}

#main .end-page .projects-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

.alternate .end-page {
    margin-top: 100px;
}

.share-block {
    margin: 3px 0 20px 0;
}

.share-block ul {
    list-style: none;
    margin: auto;
    padding: 0;
}

.share-block ul li {
    display: inline-block;
}

.share-block ul li a {
    display: block;
    padding: 5px 5px 5px 0;
    color: #aaa;
    border: none;
    font-size: 14px;
}

.share-block ul li a:hover {
    color: #48ba86;
}

/*
	8. About Page
*/

#about-page #main .services {
    margin-top: 60px;
}

#about-page #main .services .service-block {
    margin-bottom: 30px;
}

#about-page #main .services .service-block h4 {
    margin: 0;
}

#about-page #main .services .service-block p {
    margin: 15px 0 0;
}

#about-page #main .team {
    margin-top: 100px;
}

#about-page #main .team .team-title {
    text-align: center;
    margin-bottom: 70px;
}

#about-page #main .team .team-title h2 {
    margin: 0;
}

#about-page #main .team .team-title p {
    margin: 0;
    font-size: 17px;
}

#about-page #main .team .team-member {
    text-align: center;
    margin-bottom: 30px;
}

#about-page #main .team .team-member .photo {
    border-radius: 500px;
    overflow: hidden;
}

#about-page #main .team .team-member .photo img {
    width: 100%;
}

#about-page #main .team .team-member .content {
    margin-top: 20px;
}

#about-page #main .team .team-member .content h3 {
    margin: 0;
}

#about-page #main .team .team-member .content p {
    margin: 0;
}

#about-page #main .team .team-member .content .social-links {
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
}

#about-page #main .team .team-member .content .social-links li {
    display: inline-block;
    opacity: 0;
    transform: translateY(10px);
}

#about-page #main .team .team-member .content .social-links li:nth-child(1) {
    transition: transform 200ms 100 ms, opacity 200ms 100 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(2) {
    transition: transform 200ms 200 ms, opacity 200ms 200 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(3) {
    transition: transform 200ms 300 ms, opacity 200ms 300 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(4) {
    transition: transform 200ms 400 ms, opacity 200ms 400 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(5) {
    transition: transform 200ms 500 ms, opacity 200ms 500 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(6) {
    transition: transform 200ms 600 ms, opacity 200ms 600 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(7) {
    transition: transform 200ms 700 ms, opacity 200ms 700 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(8) {
    transition: transform 200ms 800 ms, opacity 200ms 800 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(9) {
    transition: transform 200ms 900 ms, opacity 200ms 900 ms;
}

#about-page #main .team .team-member .content .social-links li:nth-child(10) {
    transition: transform 200ms 1000 ms, opacity 200ms 1000 ms;
}

#about-page #main .team .team-member .content .social-links li a {
    display: block;
    width: 28px;
    height: 28px;
    color: rgba(170, 170, 170, .7);
    font-size: 16px;
    border-bottom: none;
    line-height: 1;
    padding-top: 6px;
}

#about-page #main .team .team-member .content .social-links li a:hover {
    color: #48ba86;
}

#about-page #main .team .team-member:hover .social-links li {
    transform: translateY(0);
    opacity: 1;
}

#about-page #main .studio {
    margin-top: 50px;
}

#about-page #main .studio h2 {
    line-height: 1;
    margin: 0;
}

#about-page #main .studio p {
    margin-top: 25px;
}

#about-page #main .approach {
    margin-top: 80px;
}

#about-page #main .approach img {
    width: 100%;
}

#about-page #main .approach .text {
    padding: 25px 0;
}

#about-page #main .approach .text h2 {
    margin: 0;
}

#about-page #main .approach .text p {
    font-size: 19px;
}

#about-page #main .approach .text .links {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
}

#about-page #main .approach .text .links li {
    margin-bottom: 15px;
}

#about-page #main .approach .text .links li:last-child {
    margin-bottom: 0;
}

#about-page #main .approach .text .links li a {
    font-size: 17px;
    border-bottom: 1px solid rgba(72, 186, 134, .3);
}

#about-page #main .approach .text .links li a:hover {
    border-color: #48ba86;
}

/*
	9. Blog Page
*/

#blog-page #main .articles-list {
    margin-top: 10px;
}

#blog-page #main article {
    border-bottom: 1px solid rgba(170, 170, 170, .2);
}

#blog-page #main article .post {
    position: relative;
    display: block;
    border: none;
    padding: 40px 0;
}

#blog-page #main article .arrow {
    position: absolute;
    display: block;
    top: 50%;
    right: 0;
    width: 35px;
    height: 1px;
    background-color: #aaa;
    transition: opacity 300ms;
    opacity: 0;
}

#blog-page #main article .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    right: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #aaa;
    transition: border-color 300ms;
}

#blog-page #main article .content {
    display: inline-block;
    transition: transform 250ms;
}

#blog-page #main article .content h2 {
    margin: 0;
    padding-right: 50px;
    line-height: 1.2;
    transition: color 250ms;
}

#blog-page #main article .content > ul {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
}

#blog-page #main article .content > ul > li {
    display: inline-block;
    margin-right: 20px;
}

#blog-page #main article .content > ul > li:last-child {
    margin-right: 0;
}

#blog-page #main article .content > ul > li.author {
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

#blog-page #main article .content > ul > li.author:before {
    content: 'by';
    margin-right: 3px;
}

#blog-page #main article .content > ul > li.categories ul {
    padding: 0;
}

#blog-page #main article .content > ul > li.categories ul li {
    display: inline;
    color: #aaa;
    font-size: 13px;
    font-weight: 300;
}

#blog-page #main article .content > ul > li.categories ul li:after {
    content: '—';
    margin-left: 5px;
}

#blog-page #main article .content > ul > li.categories ul li:last-child {
    margin-right: 0;
}

#blog-page #main article .content > ul > li.categories ul li:last-child:after {
    content: '';
    margin-left: 0;
}

#blog-page #main article .content p {
    font-size: 15px;
}

#blog-page #main article:hover .arrow {
    opacity: 1;
}

#blog-page #main article:hover .content {
    transform: translateX(5px);
}

#blog-page #main article:hover .content h2 {
    color: rgba(14, 14, 14, .6);
}

#blog-page #main .end-page {
    margin-top: 50px;
    overflow: hidden;
}

#blog-page #main .end-page .pages-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#blog-page #main .end-page .pages-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #aaa;
    transition: transform 300ms, background-color 300ms;
}

#blog-page #main .end-page .pages-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: border-color 300ms;
}

#blog-page #main .end-page .pages-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #aaa;
}

#blog-page #main .end-page .pages-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #aaa;
}

#blog-page #main .end-page .pages-navigation.previous-page {
    float: left;
}

#blog-page #main .end-page .pages-navigation.next-page {
    float: right;
}

#blog-page #main .end-page .pages-navigation:hover .arrow {
    background-color: #48ba86;
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-left {
    transform: translateX(-20px);
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-right {
    transform: translateX(20px);
}

#blog-page #main .end-page .pages-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

#blog-page #main .end-page .pagination {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
    text-align: center;
}

#blog-page #main .end-page .pagination li {
    display: inline-block;
}

#blog-page #main .end-page .pagination li a {
    display: block;
    border-bottom: none;
    padding: 4px 10px;
    color: #0e0e0e;
}

#blog-page #main .end-page .pagination li a:hover {
    color: #48ba86;
}

#blog-page #main .end-page .pagination li.current {
    color: #aaa;
    margin: 4px 8px;
}

#blog-page.alternative #main article {
    border-bottom: none;
    margin-bottom: 70px;
}

#blog-page.alternative #main article:last-of-type {
    margin-bottom: 0;
}

#blog-page.alternative #main article .image {
    display: block;
    position: relative;
    overflow: hidden;
    border-bottom: none;
    z-index: 3;
}

#blog-page.alternative #main article .image i {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 15px;
    font-size: 20px;
    color: #fff;
    z-index: 2;
    opacity: 0;
    transition: top 250ms, opacity 100ms;
}

#blog-page.alternative #main article .image img {
    width: 100%;
}

#blog-page.alternative #main article .image:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 250ms;
    opacity: 0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 1;
}

#blog-page.alternative #main article .image:hover i {
    top: 10px;
    opacity: 1;
}

#blog-page.alternative #main article .image:hover:before {
    opacity: 1;
}

#blog-page.alternative #main article .content {
    margin-top: 20px;
}

#blog-page.alternative #main article .content .title h2 {
    transition: color 150ms;
    padding-right: 0;
}

#blog-page.alternative #main article .content .title:hover h2 {
    color: #48ba86;
}

#blog-page.alternative #main article .content > ul {
    margin: 6px 0 0;
}

#blog-page.alternative #main article .content p {
    margin: 30px 0 40px;
}

#blog-page.alternative #main article .content .read-more {
    font-size: 17px;
    border-bottom: 1px solid rgba(72, 186, 134, .3);
}

#blog-page.alternative #main article .content .read-more:hover {
    border-color: #48ba86;
}

#blog-page.alternative #main article:hover .content {
    transform: none;
}

#blog-page.alternative #main article:hover .content h2 {
    color: #0e0e0e;
}

/*
	10. Blog Single
*/

#blog-single #main article .title-image {
    margin-bottom: 20px;
}

#blog-single #main article .title-image img {
    width: 100%;
}

#blog-single #main article .article-top h2 {
    margin: 0;
    padding-right: 50px;
    line-height: 1.2;
    transition: color 250ms;
}

#blog-single #main article .article-top > ul {
    list-style: none;
    margin: 6px 0 30px;
    padding: 0;
}

#blog-single #main article .article-top > ul > li {
    display: inline-block;
    margin-right: 20px;
}

#blog-single #main article .article-top > ul > li:last-child {
    margin-right: 0;
}

#blog-single #main article .article-top > ul > li.author {
    display: inline-block;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

#blog-single #main article .article-top > ul > li.author:before {
    content: 'by';
    margin-right: 3px;
}

#blog-single #main article .article-top > ul > li.time {
    font-size: 13px;
    color: #aaa;
}

#blog-single #main article .article-top > ul > li.categories ul {
    padding: 0;
}

#blog-single #main article .article-top > ul > li.categories ul li {
    display: inline;
    color: #aaa;
    font-size: 13px;
    font-weight: 300;
}

#blog-single #main article .article-top > ul > li.categories ul li:after {
    content: '—';
    margin-left: 5px;
}

#blog-single #main article .article-top > ul > li.categories ul li:last-child {
    margin-right: 0;
}

#blog-single #main article .article-top > ul > li.categories ul li:last-child:after {
    content: '';
    margin-left: 0;
}

#blog-single #main .end-page {
    margin-top: 50px;
    overflow: hidden;
    /*.share-block
        text-align center
        margin 3px 0 20px 0

        ul
          list-style none
          margin auto
          padding 0

          li
            display inline-block

            a
              display block
              padding 5px
              color $grey
              border none
              font-size 14px

              &:hover
                color $main*/
}

#blog-single #main .end-page .articles-navigation {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 8px;
    border: none;
}

#blog-single #main .end-page .articles-navigation .arrow {
    position: relative;
    display: block;
    width: 35px;
    height: 1px;
    background-color: #aaa;
    transition: transform 300ms, background-color 300ms;
}

#blog-single #main .end-page .articles-navigation .arrow:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    top: -4px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: border-color 300ms;
}

#blog-single #main .end-page .articles-navigation .arrow.arrow-left:after {
    left: 0;
    border-right: 5px solid #aaa;
}

#blog-single #main .end-page .articles-navigation .arrow.arrow-right:after {
    right: 0;
    border-left: 5px solid #aaa;
}

#blog-single #main .end-page .articles-navigation.previous-article {
    float: left;
}

#blog-single #main .end-page .articles-navigation.next-article {
    float: right;
}

#blog-single #main .end-page .articles-navigation:hover .arrow {
    background-color: #48ba86;
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-left {
    transform: translateX(-20px);
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-left:after {
    border-right-color: #48ba86;
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-right {
    transform: translateX(20px);
}

#blog-single #main .end-page .articles-navigation:hover .arrow.arrow-right:after {
    border-left-color: #48ba86;
}

#blog-single #main .comments h3 {
    margin: 0 0 30px;
}

#blog-single #main .comments .comments-list {
    margin-top: 70px;
}

#blog-single #main .comments .comments-list .comment {
    margin-bottom: 60px;
}

#blog-single #main .comments .comments-list .comment:last-child {
    margin-bottom: 0;
}

#blog-single #main .comments .comments-list .comment.reply {
    margin-left: 70px;
}

#blog-single #main .comments .comments-list .comment .user-photo {
    float: left;
    overflow: hidden;
    border-radius: 100%;
    margin-right: 25px;
}

#blog-single #main .comments .comments-list .comment .user-photo img {
    width: 100%;
}

#blog-single #main .comments .comments-list .comment .content {
    overflow: hidden;
}

#blog-single #main .comments .comments-list .comment .content h4 {
    display: inline-block;
    margin: 0 8px 0 0;
    line-height: 1;
}

#blog-single #main .comments .comments-list .comment .content .time {
    font-size: 11px;
    color: #aaa;
}

#blog-single #main .comments .comments-list .comment .content p {
    margin: 15px 0 20px;
}

#blog-single #main .comments .comments-list .comment .content .reply {
    display: inline-block;
    border-bottom: 1px solid rgba(72, 186, 134, .3);
}

#blog-single #main .comments .comments-list .comment .content .reply:hover {
    border-color: #48ba86;
}

#blog-single #main .comments .leave-comment {
    margin-top: 70px;
}

#blog-single #main .comments .leave-comment form input,
#blog-single #main .comments .leave-comment form textarea {
    border-color: rgba(0, 0, 0, .08);
    background-color: transparent;
    margin-bottom: 30px;
}

#blog-single #main .comments .leave-comment form input:focus,
#blog-single #main .comments .leave-comment form textarea:focus {
    border-color: rgba(0, 0, 0, .3);
}

#blog-single #main .comments .leave-comment form textarea {
    min-height: 250px;
}

/*
	11. Contact Page
*/

#contact-page #google-map {
    margin-top: 30px;
    width: 100%;
    height: 400px;
}

#contact-page #main .offices-information {
    margin-top: 50px;
}

#contact-page #main .offices-information h2 {
    line-height: 1;
    margin: 0;
}

#contact-page #main .offices-information p {
    margin-top: 25px;
}

#contact-page #main .offices-list {
    margin-top: 60px;
}

#contact-page #main .offices-list .office-block {
    margin-bottom: 30px;
}

#contact-page #main .offices-list .office-block h4 {
    margin: 0;
}

#contact-page #main .offices-list .office-block p {
    margin: 15px 0 0;
}

#contact-page #main .offices-list .office-block p .phone {
    display: inline-block;
    color: #333;
    border-bottom: 1px dotted rgba(170, 170, 170, .7);
    margin: 3px 0;
    padding-bottom: 0;
}

#contact-page #main .offices-list .office-block p .phone:hover {
    border-bottom-color: transparent;
    color: #0e0e0e;
}

#contact-page #main .say-hello h2 {
    line-height: 1;
    margin: 0;
}

#contact-page #main .say-hello p {
    margin-top: 25px;
}

#contact-page #main .say-hello form {
    margin-top: 50px;
}

#contact-page #main .say-hello form input,
#contact-page #main .say-hello form textarea {
    border-color: rgba(0, 0, 0, .08);
    margin-bottom: 30px;
}

#contact-page #main .say-hello form input:focus,
#contact-page #main .say-hello form textarea:focus {
    border-color: rgba(0, 0, 0, .3);
}

#contact-page #main .say-hello form input.invalid,
#contact-page #main .say-hello form textarea.invalid {
    border-color: #f44336;
    color: #f44336;
    border-radius: 0;
}

#contact-page #main .say-hello form input.btn,
#contact-page #main .say-hello form textarea.btn {
    display: inline-block;
    text-align: center;
    margin: auto;
    background-color: #48ba86;
    color: #fff;
    font-size: 13px;
    border-radius: 2px;
    padding: 8px 14px;
    transition: background-color 200ms;
    width: auto;
}

#contact-page #main .say-hello form input.btn:hover,
#contact-page #main .say-hello form textarea.btn:hover {
    background-color: #39966c;
    color: #fff;
}

#contact-page #main .say-hello form input.btn:active,
#contact-page #main .say-hello form textarea.btn:active {
    background-color: #32845e;
}

#contact-page #main .say-hello form input.btn:focus,
#contact-page #main .say-hello form textarea.btn:focus {
    color: #fff;
}

#contact-page #main .say-hello form input.btn.small,
#contact-page #main .say-hello form textarea.btn.small {
    padding: 5px 10px;
}

#contact-page #main .say-hello form input.btn.large,
#contact-page #main .say-hello form textarea.btn.large {
    padding: 12px 18px;
}

#contact-page #main .say-hello form textarea {
    min-height: 250px;
}

#contact-page #main .say-hello form #message {
    margin-top: 20px;
}

#contact-page #main .say-hello form #message p {
    margin: 0;
    margin: 0;
}

#contact-page #main .say-hello form #message .error p {
    color: #f44336;
}

#contact-page #main .say-hello form #message .success p {
    color: #48ba86;
}

/*
	12. Responsive
*/

@media (max-width: 992px) {
    #works-grid .works-item {
        width: 48.25% !important;
    }

    #project-page #main .details {
        padding: 15px 0;
    }
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .global-outer .global-inner {
        padding: 25px 30px 60px 30px;
    }

    .container-fluid {
        padding: 0;
    }

    #sidebar {
        float: none;
        width: 100%;
    }

    #sidebar .sidebar-inner {
        padding-right: 0;
    }

    #sidebar .logo {
        margin-bottom: 15px;
    }

    #sidebar .intro {
        border-bottom: 1px dashed rgba(0, 0, 0, .1);
        padding-bottom: 20px;
    }

    #sidebar nav {
        padding: 15px 0 10px;
    }

    #sidebar nav ul li {
        display: inline-block;
        margin: 0 5px;
    }

    #sidebar nav ul li.dropdown {
        poisiion: relative;
        margin-right: 17px;
    }

    #sidebar nav ul li.dropdown ul {
        position: absolute;
        margin-top: 5px;
        background-color: #fff;
        padding: 0 15px;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, .035);
        text-align: left;
        z-index: 10;
    }

    #sidebar nav ul li.dropdown ul li {
        display: block;
    }

    #sidebar nav ul li.dropdown ul li:first-child {
        padding-top: 10px;
    }

    #sidebar nav ul li.dropdown ul li:last-child {
        padding-bottom: 10px;
    }

    #sidebar nav ul li.dropdown ul li a {
        display: block;
    }

    #sidebar .copyright {
        display: none;
    }

    #sidebar .widgets-block .widget {
        margin: 30px 0 50px;
    }

    #sidebar .widgets-block .widget .title:after {
        display: none;
    }

    #sidebar .widgets-block .widget ul li {
        display: block;
    }

    #main {
        float: none;
        width: 100%;
    }

    #main .main-outer {
        padding-left: 0;
    }

    #main .end-page {
        text-align: center;
        margin: 50px 0;
        /*.share-block
        margin 20px 0*/
    }

    #main .end-page .projects-navigation .arrow,
    #main .end-page .projects-navigation.previous-project,
    #main .end-page .projects-navigation.next-project {
        float: none;
    }

    #blog-page #main .end-page {
        text-align: center;
    }

    #blog-page #main .end-page .pages-navigation .arrow,
    #blog-page #main .end-page .pages-navigation.previous-page,
    #blog-page #main .end-page .pages-navigation.next-page {
        float: none;
    }

    #blog-page #main .end-page .pagination {
        margin: 20px 0;
    }

    #blog-single #main .end-page {
        text-align: center;
        /*.share-block
          margin 20px 0*/
    }

    #blog-single #main .end-page .articles-navigation .arrow,
    #blog-single #main .end-page .articles-navigation.previous-article,
    #blog-single #main .end-page .articles-navigation.next-article {
        float: none;
    }
}

@media (max-width: 540px) {
    #works-grid .works-item {
        width: 100% !important;
    }

    #blog-single #main .comments .comments-list .comment.reply {
        margin-left: 35px;
    }
}

/* Responsive embeds – Bootstrap 3 shim */

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive .embed-responsive-item, .embed-responsive iframe,
.embed-responsive embed, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive-4by3 {
    padding-bottom: 75%;
}

/* Remove Bootstrap 3 carousel side gradients (keep this as-is) */

.carousel-control {
    background: none;
    text-shadow: none;
    width: 60px;
}

.carousel-control.left, .carousel-control.right, .carousel-control:hover,
.carousel-control:focus {
    background: none;
    background-image: none;
}

/* Center and size the Fontello arrows */

.carousel-control .icon-left-open, .carousel-control .icon-right-open {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    line-height: 1;
    color: #666;
}

/* optional hover color */

.carousel-control:hover .icon-left-open,
.carousel-control:hover .icon-right-open {
    color: #000;
}

.cv h1 {
    margin-top: 0;
}

.cv h2 {
    margin-bottom: 5px;
}

.cv ul {
    margin-top: 0;
    padding-left: 0;
}

.cv li {
    list-style: none;
    margin-bottom: 5px;
}

body#about-page .title-image {
    margin-bottom: 20px;
}

body#about-page h1 {
    margin-top: 0;
}

body#about-page .description {
    margin: 0 0 100px 0;
}

.widget {
    margin: 0 0 80px;
}

.widget:last-of-type {
    margin-bottom: 0;
}

.widget .title {
    display: block;
    color: #aaa;
    margin: 0 0 5px;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.widget .title:after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ddd;
    margin-top: 3px;
}

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

.widget ul li {
    display: block;
    padding: 5px 0;
}

.widget.filter li {
    color: #0e0e0e;
    transition: color 100ms;
}

.widget.filter li.active {
    color: #48ba86;
}

.widget.filter li:hover {
    color: #48ba86;
    cursor: pointer;
}

.widget.twitter ul li {
    line-height: 1.7;
    font-size: 13px;
    padding: 15px 0;
}

.widget.twitter ul li:first-child {
    padding-top: 0;
}

.widget.twitter ul li:last-child {
    padding-bottom: 0;
}

.widget.twitter ul li .time {
    display: block;
    margin: 7px 0 0;
    color: #aaa;
    font-size: 13px;
    border: none;
}

.widget.twitter ul li .time:hover {
    color: #48ba86;
}

.widget.sculptures ul li {
    margin-bottom: 10px;
}

.widget.sculptures ul li a {
    display: block;
    border: none;
    color: #333;
    width: 100%;
}

.widget.sculptures ul li a:hover {
    color: #48ba86;
}

.widget.about {
    text-align: left;
}

.widget.about ul li a {
    font-size: 13px;
    display: block;
    border: none;
    color: #333;
    width: 100%;
}

.widget.about ul li a:hover {
    color: #48ba86;
}

.widget.blog-categories ul li a {
    display: block;
    border: none;
    color: #333;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget.blog-categories ul li a:hover {
    color: #48ba86;
}

.widget.tags ul li {
    display: inline-block;
    margin: 5px 0;
    padding: 0;
}

.widget.tags ul li a {
    display: block;
    color: #aaa;
    border: none;
    background-color: rgba(170, 170, 170, .1);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 150px;
    white-space: nowrap;
    transition: background-color 200ms, color 200ms;
}

.widget.tags ul li a:hover {
    color: #333;
    background-color: rgba(170, 170, 170, .2);
}