/* -----------------------------------------------------------
    Author       : Theme_xyz
    Template Name: Porfi - Personal Portfolio Template
    Version      : 1.0
------------------------------------------------------------*/
/*============================================================
    CSS TABLE OF CONTENTS
==============================================================
    01. GENAREL CSS STYLE
    02. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
    03. START HEADER AREA CSS STYLE
    04. START ABOUT AREA CSS STYLE
    05. START SEVICE AREA CSS STYLE
    06. START PORTFOLIO AREA CSS STYLE  
    07. START TESTIMONIAL AREA CSS STYLE
    08. START CONTACT FORM AREA CSS STYLE
    09. START FOOTER AREA CSS STYLE
    10. sTART SINGLE PROJECT PAGE CSS STYLE
=============================================================*/
/*
* -------------------------------------------------------------
*    01. GENAREL CSS STYLE
* -------------------------------------------------------------
*/
body {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
    background-color: #fff;
    font-family: 'Ubuntu', sans-serif;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #333;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif;
}
a {
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    -webkit-transition: all 0.36s;
    transition: all 0.36s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
}
p { line-height: 2 }
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
.section-padding { padding: 80px 0 }
.section-title { margin-bottom: 50px }
.section-title h2 {
    margin-bottom: 10px;
    padding-bottom: 10px;
    position: relative;
    font-size: 34px;
}
.section-title h2:after {
    border-bottom: 2px solid #555;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 10%;
}
.section-title p {
    background: #ffff95 none repeat scroll 0 0;
    color: #000;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
}
.button{
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 15px;
    position:relative;
    font-weight: 700;
    font-size: 12px;
    color: #333;
    letter-spacing:1px;
    background: transparent;
    border: 2px solid #333;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform: translateZ(0px);
            transform: translateZ(0px);
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transition-property: color;
    transition-property: color;
    vertical-align: middle;
    -webkit-transition: 0.36s;
            transition:0.36s;
}
.button:before {
    background: #ffff95 none repeat scroll 0 0;
    position: absolute;
    content: "";
    z-index: -1;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
    -webkit-transform-origin: 50% 50% 0;
            transform-origin: 50% 50% 0;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
}
.button:hover, .button:focus {  color:#000 }
.button:hover.button:before{
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
            transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.preloader {
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
    background: #333 none repeat scroll 0 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}
.spinner {
    font-size: 10px;
    height: 70px;
    margin: 0 auto;
    text-align: center;
    width: 100px;
}
.spinner > div {
    animation: 1.2s ease-in-out 0s normal none infinite running sk-stretchdelay;
    background-color: #ffff95;
    display: inline-block;
    height: 100%;
    width: 10px;
}
.spinner .rect2 {
    animation-delay: -1.1s;
}
.spinner .rect3 {
    animation-delay: -1s;
}
.spinner .rect4 {
    animation-delay: -0.9s;
}
.spinner .rect5 {
    animation-delay: -0.8s;
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
    }
}
@keyframes sk-stretchdelay {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }
    20% {
        transform: scaleY(1);
    }
}
.owl-carousel .item  {
    display: block;
    width: 100%;
    height: auto;
}
.carousel-indicators .active { background-color: #33CC99 }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: #33CC99 none repeat scroll 0 0 }
/*
* -------------------------------------------------------------
*    01. / END GENAREL CSS STYLE
* -------------------------------------------------------------
*/

/*
* -------------------------------------------------------------
*    02. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
.header-top-area {
    position: relative;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.36s ease-out;
            transition: all 0.36s ease-out;
}
.sticky-wrapper {
    position: absolute;
    width: 100%;
    z-index: 999;
}
.navbar-default {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    -webkit-transition: all 0.36s ease-in-out 0s;
           transition: all 0.36s ease-in-out 0s;
    width: 100%;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus { background-color: transparent }
.navbar-brand {
    color: #fff !important;
    font-family: 'Lato', sans-serif;
    font-size: 26px;
    font-weight: 900;
    padding: 30px 0;
    -webkit-transition: 0.36s;
    transition: 0.36s;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #fff }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #333 }
.mainmenu li a {
    color: #fff !important;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 30px 15px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.mainmenu ul.nav.navbar-nav li a:hover { color: #ffff95 !important }
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.is-sticky .header-top-area{
    background: #fff;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
}
.is-sticky .mainmenu li a {
    padding: 20px 15px;
    color: #666 !important; 
}
.is-sticky .mainmenu ul.nav.navbar-nav li a:hover,
.is-sticky .mainmenu ul.nav.navbar-nav li.active a { color: #333 !important }
.is-sticky .navbar-brand {
    color: #333 !important;
    font-size: 24px;
    padding: 10px 0;
}
/*
* -------------------------------------------------------------
*    02. / END BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    03. START HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
.header-area { height: 100%; }
.header-welcome-area,
.header-welcome-area div { height: 100% }
.header-welcome-area div.home-display-table-cell,
.header-welcome-area div.home-display-table-cell div { height: auto }
.header-welcome-area {
    background: url(../img/bg/home-bg.webp) scroll 0 0;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.header-welcome-area:after {
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
}
.home-display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.home-display-table-cell {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.header-welcome-area h2 {
    color: #fff;
    font-size: 72px;
    font-weight: 900;
    margin-bottom: 20px;
}
.header-welcome-area p {
    background: rgba(255, 255, 149, 0.8);
    display: inline-block;
    margin: 0 auto 30px;
    font-weight: 400;
    font-size: 22px;
    padding: 0 15px;
    color: #000;
}
.social_links a i {
    border-radius: 25px;
    font-size: 30px;
    color: #fff;
    -webkit-transition: all 0.36s ease-in-out 0s;
           transition: all 0.36s ease-in-out 0s;
}
.social_links a i:hover {
    background: #ffff95 none repeat scroll 0 0;
    color: #000;
}
/*
* -------------------------------------------------------------
*    03. / END HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    04. START ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
.about-skills {
    overflow: hidden;
    margin-bottom: 30px;
}
.about-skills .progress {
    background: #ddd none repeat scroll 0 0;
    position: relative;
    overflow: visible;
    margin: 35px 0 0;
    box-shadow: none;
    border-radius: 0;
    height: 10px;
}
.about-skills .progress-bar {
    background: #333 none repeat scroll 0 0;
    box-shadow: none;
}
.about-skills .progress .lead {
    left: 0;
    top: -25px;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    text-transform: uppercase;
}
.about-skills .progress-bar > p {
    float: right;
    font-size: 12px;
    font-weight: 700;
    /*margin-right: -16px;*/
    margin-top: -25px;
    position: relative;
    color: #333;
}
.about_area a.button { margin-right: 10px }
/*
* -------------------------------------------------------------
*    04. / END ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    05. START SEVICE AREA CSS STYLE
* -------------------------------------------------------------
*/
.service-area {
    background: #f6f6f6 none repeat scroll 0 0;
    padding-bottom: 50px;
}
.single-service {
    background: #fff;
    margin-bottom: 30px;
    padding: 50px 25px;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}

.single-service:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-service i {
    font-size: 52px;
    color: #333;
}
.single-service e {
    font-size: 52px;
    color:#33CC99;
}
.single-service h4 { margin: 20px 0 10px 0 }
.single-service p {
    font-size: 13px;
    margin: 0;
}
/*
* -------------------------------------------------------------
*    05. / END SEVICE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    06. START PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
.portfolio-filter ul {
    list-style: outside none none;
    margin-bottom: 10px;
    text-align: center;
}
.portfolio-filter ul li {
    margin: 5px;
    cursor: pointer;
    font-size: 12px;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #fff;
    text-transform: uppercase;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.portfolio-filter ul li.active,
.portfolio-filter ul li:hover { 
    background: #ffff95;
    border: 2px solid #555;
    color: #000
}
.grid .mix {
    display: none;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.single-work {
    margin-top: 30px;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.single-work:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.work-overlay {
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 149, 0.8) none repeat scroll 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    
    -webkit-transition: all 0.36s ease-in-out 0s;
            transition: all 0.36s ease-in-out 0s;
}
.single-work:hover .work-overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.work-title h5{ margin: 70px 0 0 }
.work-title p{ margin: 0 }
.work-icon a {
    font-size: 24px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.single-work:hover .work-icon a {
    color: #666;
}
.work-icon a:hover{ color: #000 !important }
/*
* -------------------------------------------------------------
*    06. / END PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    07. START TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
.testimonial-area {
    background: #f6f6f6;
}
.testimonial-area .item img {
    background: #ffff95;
    border-radius: 50%;
    height: 80px;
    margin: 0 auto 10px;
    padding: 5px;
}
.testimonial-area .item h6 {
    font-weight: 400;
    margin: 10px 0 15px;
}
/*
* -------------------------------------------------------------
*    07. / END TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    08. START CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #999;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    font-size: 16px;
    margin: 10px 0;
    height: 45px;
    padding: 0;
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.form-control::-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.form-control:hover,
.form-control:focus {
    background: transparent;
    border-color: -moz-use-text-color -moz-use-text-color #ffff95;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #ffff95 none repeat scroll 0 0;
    color: #000;
}
.success {
    text-align: center;
    margin: 80px 0;
    font-size: 18px;
    font-weight: 700;
}
/*
* -------------------------------------------------------------
*    08. / END CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    09. START FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
.copyright {
    background: #333;
    padding: 30px 0;
    color: #fff;
}
.copyright p { margin: 0 }
/*
* -------------------------------------------------------------
*    09. / END FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    10. SINGLE PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/
.breadcrumb-main{
    background:url(../img/bg/breadcrumb-bg.jpg);
    background-position: center center;
    background-size: cover;
    position: relative;
    height:  350px;
    z-index:1;
}
.breadcrumb-main:after {
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}
.breadcrumb-title{ padding-top: 150px }
.breadcrumb-title h2{
    font-weight: 900;
    color: #fff;
}
.breadcrumb-title p,
.breadcrumb-title p a{ color: #fff }
.details-single-project{ margin: 30px 0 20px }
.about-single-project h4,
.details-single-project h4 {
    border-bottom: 3px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 10px;
}
.details-single-project li {
    color: #555;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.details-single-project li a,
.details-single-project li i {
    margin-right: 10px;
    color: #333;
}
.related-projects h4 {
    border-bottom: 3px solid #eee;
    margin-top: 30px;
    padding: 10px 0;
}
/*
* -------------------------------------------------------------
*    10. END PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/