.container {
    height: 100%;
}

.container {
    display: flex;
    justify-content: start;
    align-items: start;
    background-color: #212121;
    flex-direction: column;
}

.title {
    font-size: 38px;
    color: #616161;
    font-style: italic;
    font-weight: 800;
}

.timeline {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);
}
.timeline .swiper-container {
    height: 80%;
    width: 100%;
    position: relative;
}
.timeline .swiper-wrapper {
    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}
.timeline .swiper-slide {
    position: relative;
    color: #fff;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.timeline .swiper-slide::after {
    content: "";
    position: absolute;
    z-index: 1;
    right: -115%;
    bottom: -10%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);
    border-radius: 100%;
}
.timeline .swiper-slide-content {
    position: absolute;
    text-align: center;
    width: 80%;
    max-width: 310px;
    right: 50%;
    top: 13%;
    -webkit-transform: translate(50%, 0);
    transform: translate(50%, 0);
    font-size: 12px;
    z-index: 2;
}
.timeline .swiper-slide .timeline-year {
    display: block;
    font-style: italic;
    font-size: 42px;
    margin-bottom: 50px;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
    color: #d4a024;
    font-weight: 300;
    opacity: 0;
    transition: .2s ease .4s;
}
.timeline .swiper-slide .timeline-title {
    font-weight: 800;
    font-size: 34px;
    margin: 0 0 30px;
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
    transition: .2s ease .5s;
}
.timeline .swiper-slide .timeline-text {
    line-height: 1.5;
    opacity: 0;
    -webkit-transform: translate3d(20px, 0, 0);
    transform: translate3d(20px, 0, 0);
    transition: .2s ease .6s;
}
.timeline .swiper-slide-active .timeline-year {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: .4s ease 1.6s;
}
.timeline .swiper-slide-active .timeline-title {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: .4s ease 1.7s;
}
.timeline .swiper-slide-active .timeline-text {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: .4s ease 1.8s;
}
.timeline .swiper-pagination {
    right: 15% !important;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    font-style: italic;
    font-weight: 300;
    font-size: 18px;
    z-index: 1;
}
.timeline .swiper-pagination::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}
.timeline .swiper-pagination-bullet {
    width: auto;
    height: auto;
    text-align: center;
    opacity: 1;
    background: transparent;
    color: #d4a024;
    margin: 15px 0 !important;
    position: relative;
}
.timeline .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 8px;
    left: -32.5px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background-color: #d4a024;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: .2s;
}
.timeline .swiper-pagination-bullet-active {
    color: #d4a024;
}
.timeline .swiper-pagination-bullet-active::before {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
    background-size: 20px 20px;
    top: 15%;
    width: 20px;
    height: 20px;
    margin-top: 0;
    z-index: 2;
    transition: .2s;
}
.timeline .swiper-button-prev {
    left: 8%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-prev:hover {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}
.timeline .swiper-button-next {
    right: 8%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}
.timeline .swiper-button-next:hover {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}
@media screen and (min-width: 768px) {
    .timeline .swiper-slide::after {
        right: -30%;
        bottom: -8%;
        width: 240px;
        height: 50%;
        box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);
    }
    .timeline .swiper-slide-content {
        right: 30%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 310px;
        font-size: 11px;
        text-align: right;
    }
    .timeline .swiper-slide .timeline-year {
        margin-bottom: 0;
        font-size: 32px;
    }
    .timeline .swiper-slide .timeline-title {
        font-size: 46px;
        margin: 0;
    }
    .timeline .swiper-pagination {
        display: flex;
    }
    .timeline .swiper-button-prev {
        top: 15%;
        left: auto;
        right: 15%;
        -webkit-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
    }
    .timeline .swiper-button-prev:hover {
        -webkit-transform: rotate(90deg) translate(-3px, 10px);
        transform: rotate(90deg) translate(-3px, 10px);
    }
    .timeline .swiper-button-next {
        top: auto;
        bottom: 15%;
        right: 15%;
        -webkit-transform: rotate(90deg) translate(0, 10px);
        transform: rotate(90deg) translate(0, 10px);
    }
    .timeline .swiper-button-next:hover {
        -webkit-transform: rotate(90deg) translate(3px, 10px);
        transform: rotate(90deg) translate(3px, 10px);
    }
}
@media screen and (min-width: 1024px) {
    .timeline .swiper-slide::after {
        right: -20%;
        bottom: -12%;
        width: 240px;
        height: 50%;
        box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);
    }
    .timeline .swiper-slide-content {
        right: 25%;
    }
}

/* Portfolio */
.portfolio-filter {
    margin-bottom: 10px;
    margin-top: 20px;
}

.portfolio-filter.list-inline li {
    padding: 0;
}

.portfolio-filter a.active {
    background-color: transparent;
    border: 1px solid #4a90e2;
    color: #4a90e2;
}

.portfolio-filter a {
    border: 1px solid #d3d3d3;
    color: #878787;
    letter-spacing: 0.1em;
    line-height: 40px;
    margin: 0 5px;
    padding: 10px 20px;
}

.portfolio-filter a:hover {
    color: #4a90e2;
    background-color: transparent;
    border: 1px solid #4a90e2;
}

@media (max-width:767px) {
    .portfolio-filter a.active {
        background-color: transparent;
        border: transparent;
        color: #4a90e2;
        font-weight: 500;
    }

    .portfolio-filter a {
        border: transparent;
        color: #878787;
        letter-spacing: 0.1em;
        line-height: 40px;
        margin: 0 5px;
        padding: 10px 8px;
        font-weight: 500;
    }

    .portfolio-filter a:hover {
        color: #4a90e2;
        background-color: transparent;
        border: transparent;
        font-weight: 500;
    }

    .project-details{
        display: none;
    }
}


#portfolio ul.portfolio {
    margin-bottom: 0 !important;
}

#portfolio .project {
    padding-bottom: 15px;
    padding-top: 15px;
}

.project .img-bg-color.primary {
    background: #4a90e2 none repeat scroll 0 0;
}

.project img {
    transition: all 0.3s ease-in-out 0s;
}

#portfolio .project img {
    backface-visibility: hidden;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
}

.project-hover-tools {
    bottom: 46%;
    opacity: 0;
    position: absolute;
    right: 36%;
    text-align: center;
    transition: opacity 0.3s ease 0s, all 0.3s ease-in-out 0s;
    visibility: hidden;
    z-index: 2;
}

.view-btn {
    background-color: #ffffff;
    border-radius: 50%;
    color: #333333;
    display: inline-block;
    height: 42px;
    line-height: 45px;
    margin: 3px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 42px;
}

.open-gallery {
    background-color: #333333;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    height: 42px;
    line-height: 45px;

    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: 42px;
}
/*//margin: 3px;*/
.project-details {
    bottom: 5%;
    left: 10%;
    opacity: 0;
    position: absolute;
    text-align: left;
    transition: opacity 0.3s ease 0s, all 0.3s ease-in-out 0s;
    visibility: hidden;
    z-index: 2;
}

.project-title {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
}

.project .subtitle {
    color: #f8f8f8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Hover Effect */
.project-hover-tools {
    position: absolute;
    z-index: 2;
    bottom: 46%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s, ease-in-out 0.3s;
    -moz-transition: opacity 0.3s, ease-in-out 0.3s;
    -o-transition: opacity 0.3s, ease-in-out 0.3s;
    transition: opacity 0.3s, ease-in-out 0.3s;
}

.project:hover .project-hover-tools {
    bottom: 43%;
    right: 36%;
    text-align: center;
    visibility: visible;
    opacity: 1;
}

.m-project .project-hover-tools {
    bottom: 49%;
}

.project.m-project:hover .project-hover-tools {
    bottom: 46%;
}

.project .img-bg-color.primary {
    background: #4a90e2;
}

.project .img-bg-color.default {
    background: #333333;
}

.project img {
    -webkit-transition: ease-in-out 0.3s;
    -moz-transition: ease-in-out 0.3s;
    -o-transition: ease-in-out 0.3s;
    transition: ease-in-out 0.3s;
}

.project:hover img {
    opacity: 0.25;
}

.view-btn {
    display: inline-block;
    color: #333333;
    background-color: #ffffff;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 50%;
    margin: 3px;
}

.view-btn:hover {
    color: #ffffff;
    background-color: #333333;
}

.open-gallery {
    display: inline-block;
    color: #ffffff;
    background-color: #303030;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    vertical-align: middle;
    border-radius: 50%;
    /*margin: 3px;*/
}

.open-gallery i {
    /*margin-left: 3px;*/
}

.open-gallery:hover {
    color: #ffffff;
    background-color: #202020;
}

.project .img-bg-color.default .open-gallery {
    color: #ffffff;
    background-color: #4a90e2;
}

.project .img-bg-color.default .open-gallery:hover {
    color: #ffffff;
    background-color: #ad8b60;
}

.project-details {
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 10%;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.3s, ease-in-out 0.3s;
    -moz-transition: opacity 0.3s, ease-in-out 0.3s;
    -o-transition: opacity 0.3s, ease-in-out 0.3s;
    transition: opacity 0.3s, ease-in-out 0.3s;
}

.project:hover .project-details {
    bottom: 8%;
    left: 10%;
    text-align: left;
    visibility: visible;
    opacity: 1;
}

.m-project .project-details {
    bottom: 2%;
}

.project.m-project:hover .project-details {
    bottom: 5%;
}

.project-title {
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 3px;
    font-weight: 500;
    text-transform: uppercase;
}

.project .subtitle {
    color: #f8f8f8;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mfp-arrow {
    color: #ffffff;
    opacity: 0.7 !important;
}

.mfp-arrow:hover {
    opacity: 1 !important;
}

.mfp-arrow:after {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    top: 5px !important;
}

.mfp-arrow-right:before {
    border-left: none !important;
}

.mfp-arrow-left:before {
    border-right: none !important;
}

.mfp-arrow-right:after {
    content: "\e876" !important;
    font-family: 'Linearicons-Free' !important;
    font-size: 30px;
    border-right: none !important;
    margin-left: 25px !important;
}

.mfp-arrow-left:after {
    content: "\e875" !important;
    font-family: 'Linearicons-Free' !important;
    font-size: 30px;
    border-right: none !important;
    margin-left: 15px !important;
}

/*---------------------*/
@media only screen and (max-width: 660px) {
    .project-hover-tools {
        bottom: 44%;
        right: 34%;
    }

    .project:hover .project-hover-tools {
        bottom: 41%;
        right: 34%;
    }

    #portfolio.info-box .project-hover-tools {
        right: 34%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        right: 34%;
    }

    #portfolio.info-box .m-project .project-hover-tools {
        bottom: 58.5%;
    }

    #portfolio.info-box .project.m-project:hover .project-hover-tools {
        bottom: 55.5%;
    }

    #portfolio.info-box .container-fluid .project-hover-tools {
        bottom: 62%;
    }

    #portfolio.info-box .container-fluid .project:hover .project-hover-tools {
        bottom: 59%;
    }
}


/*---------------------*/
@media only screen and (max-width: 500px) {
    .col-xs-6 {
        width: 100%;
    }

    .col-xs1-6 {
        width: 10%;
    }

    .project-hover-tools {
        bottom: 48%;
        right: 41%;
    }

    .project:hover .project-hover-tools {
        bottom: 45%;
        right: 41%;
    }

    .m-project .project-hover-tools {
        bottom: 50%;
    }

    .project.m-project:hover .project-hover-tools {
        bottom: 47%;
    }

    #portfolio.info-box .project-hover-tools {
        bottom: 58%;
        right: 41%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        bottom: 55%;
        right: 41%;
    }

    #portfolio.info-box .m-project .project-hover-tools {
        bottom: 56%;
    }

    #portfolio.info-box .project.m-project:hover .project-hover-tools {
        bottom: 53%;
    }

    #portfolio .container-fluid .project-hover-tools {
        bottom: 48%;
        right: 42%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        bottom: 45%;
        right: 42%;
    }

    #portfolio .container-fluid .m-project .project-hover-tools {
        bottom: 50%;
        right: 41%;
    }

    #portfolio .container-fluid .project.m-project:hover .project-hover-tools {
        bottom: 47%;
        right: 41%;
    }

    #portfolio.info-box .container-fluid .project-hover-tools {
        bottom: 58%;
    }

    #portfolio.info-box .container-fluid .project:hover .project-hover-tools {
        bottom: 55%;
    }

    .about-img {
        height: 300px;
    }

    #contactForm .form-control {
        margin-bottom: 20px;
        padding: 10px;
        min-height: 40px;
    }

    #contactForm textarea {
        padding: 15px 10px !important;
    }

    #contact-form-1 .btn-form-submit {
        padding: 9px;
    }

    .help-block {
        margin-top: 20px;
    }

    .help-block.with-errors li {
        margin-top: -20px;
    }

    .footer-info {
        text-align: center;
        line-height: 1.8;
    }

    .footer-info .pull-right {
        float: none !important;
        display: block;
    }
}


@media only screen and (max-width: 550px) {
    .top-menu {
        text-align: center;
    }

    .top-menu .space-left {
        display: block;
        margin-bottom: 30px;
        padding-left: 0 !important;
    }

    .top-menu .right {
        float: none;
        display: block;
    }

    .top-menu .pull-right {
        float: none !important;
        padding: 0 !important;
    }

    .top-menu .margin-fix {
        margin-bottom: 15px !important;
    }

    .project-hover-tools {
        bottom: 48%;
        right: 40%;
    }

    .project:hover .project-hover-tools {
        bottom: 45%;
        right: 40%;
    }

    #portfolio.info-box .project-hover-tools {
        bottom: 59%;
        right: 40%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        bottom: 56%;
        right: 40%;
    }

    #portfolio.info-box .m-project .project-hover-tools {
        bottom: 57%;
    }

    #portfolio.info-box .project.m-project:hover .project-hover-tools {
        bottom: 54%;
    }

    #portfolio .container-fluid .project-hover-tools {
        right: 40%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        right: 40%;
    }

    #portfolio .container-fluid .m-project .project-hover-tools {
        right: 40%;
    }

    #portfolio .container-fluid .project.m-project:hover .project-hover-tools {
        right: 40%;
    }
}
@media only screen and (max-width: 480px) {
    .banner-content {
        padding: 80px 0;
    }

    .banner-border {
        width: 90%;
        padding: 10px;
    }

    .banner-border .banner-info {
        width: 100%;
        margin: 0 auto;
        padding: 50px;
    }

    .banner-info {
        width: 90%;
        padding: 50px;
    }

    .banner-info h1 {
        font-size: 20px;
    }

    .project-hover-tools {
        bottom: 47%;
        right: 38%;
    }

    .project:hover .project-hover-tools {
        bottom: 44%;
        right: 38%;
    }

    .m-project .project-hover-tools {
        bottom: 49%;
    }

    .project.m-project:hover .project-hover-tools {
        bottom: 46%;
    }

    #portfolio.info-box .project-hover-tools {
        bottom: 60%;
        right: 38%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        bottom: 57%;
        right: 38%;
    }

    #portfolio .container-fluid .project-hover-tools {
        right: 39%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        right: 39%;
    }

    #portfolio.info-box .container-fluid .project-hover-tools {
        bottom: 60%;
    }

    #portfolio.info-box .container-fluid .project:hover .project-hover-tools {
        bottom: 57%;
    }

    #map {
        height: 220px;
    }

    .spinner {
        left: 45%;
    }
}
@media only screen and (max-width: 400px) {
    .m-project .project-hover-tools {
        bottom: 48%;
    }

    .project.m-project:hover .project-hover-tools {
        bottom: 45%;
    }

    #portfolio.info-box .project-hover-tools {
        bottom: 60%;
        right: 36%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        bottom: 57%;
        right: 36%;
    }

    #portfolio.info-box .m-project .project-hover-tools {
        bottom: 58%;
    }

    #portfolio.info-box .project.m-project:hover .project-hover-tools {
        bottom: 55%;
    }

    #portfolio .container-fluid .project-hover-tools {
        right: 38%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        right: 38%;
    }

    .pricing-table {
        max-width: 90%;
    }

    .btn-direction.pull-right {
        float: none !important;
    }

    .team {
        width: 90%;
    }
}
@media only screen and (max-width: 360px) {
    .project-hover-tools {
        bottom: 44%;
        right: 32%;
    }

    .project:hover .project-hover-tools {
        bottom: 41%;
        right: 32%;
    }

    .m-project .project-hover-tools {
        bottom: 47%;
    }

    .project.m-project:hover .project-hover-tools {
        bottom: 44%;
    }

    #portfolio.info-box .project-hover-tools {
        bottom: 61%;
        right: 32%;
    }

    #portfolio.info-box .project:hover .project-hover-tools {
        bottom: 58%;
        right: 32%;
    }

    #portfolio.info-box .m-project .project-hover-tools {
        bottom: 59%;
    }

    #portfolio.info-box .project.m-project:hover .project-hover-tools {
        bottom: 56%;
    }

    #portfolio .container-fluid .project-hover-tools {
        bottom: 44%;
        right: 39%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        bottom: 41%;
        right: 39%;
    }

    #portfolio .container-fluid .project-hover-tools {
        right: 36%;
    }

    #portfolio .container-fluid .project:hover .project-hover-tools {
        right: 36%;
    }

    #portfolio .container-fluid .m-project .project-hover-tools {
        bottom: 48%;
        right: 36%;
    }

    #portfolio .container-fluid .project.m-project:hover .project-hover-tools {
        bottom: 45%;
        right: 36%;
    }

    #portfolio.info-box .container-fluid .project-hover-tools {
        right: 32%;
    }

    #portfolio.info-box .container-fluid .project:hover .project-hover-tools {
        right: 32%;
    }
}

.padding-hug {
    padding-top: 100px;
    padding-bottom: 80px;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-unstyled {
    list-style: none;
}

li {
    display: inline;
}
/*--------------------------------------------------------------------------------------------------------------------------*/

/* Diamonds */

.row {
    margin-right: 0px;
    margin-left: 0px
}

.row11 {
    margin-right: 15px;
    margin-left: 15px;
    width: 100%;
}

.btn-group-vertical > .btn-group:after, .btn-group-vertical > .btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row11:after, .row11:before {
    display: table;
    content: " "
}

.btn-group-vertical > .btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row11:after {
    clear: both
}

.container1 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #f3f3f3;
    width: 100%;
    padding-bottom: 10px;
}



/* ------- */