/*-----------------------------------------------------------------
Template Name: Pujari Personal Portfolio Template
Version      : 1.0.0                                       
-----------------------------------------------------------------*/

/*--------------------------------------
Table Of Index
============================
1. Reset css
2. Style Css
    2.1 Navigation
    2.2 Banner
    2.3 Services
    2.4 About Me
    2.5 Portfolio
    2.6 Testimonial
    2.7 Contact
    2.8 footer
    2.9 Extras
3. Responsive Css
--------------------------------------*/

/*=============================================
Start Default Settings
=============================================*/



/*-----------Typography Settings-------------*/

/*h1 {
    color: #fff;
    font-size: 80px;
    font-weight: 700;
    line-height: 90px;
    text-transform: capitalize;
}*/



/*-----------Spacing Css-------------*/
.ptb-1{
    padding-top: 86px;
    padding-bottom: 90px;
}

/*-----------Alignment Css-------------*/


/*-----------Color Css-------------*/
.bg-1{
    background: #f5f5f5;
}


/*=============================================
            End Default Settings
=============================================*/

/*=============================================
            Start Header Area
=============================================*/


/*=============================================
            End Header Area
=============================================*/

/*=============================================
            Start Banner Area
=============================================*/
.banner-area.banner-1 {
    background: url(../images/banner.jpg)100% no-repeat fixed;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
}

.slider-title {
    width: 100%;
    height: 100vh;
    align-items: flex-start;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-flow: column nowrap;
    -moz-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    -o-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
}
.slider-title h1 {
    z-index: 9;
}
.slider-title p {
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    line-height: 35px;
    text-transform: capitalize;
}

.overlay {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0,0,0,0.6);
}
/*----------------Animated headlines----------------*/
.pujari-words-wrapper {
    text-align: left;
    position: relative;
    display: inline-block;
 }
.pujari-words-wrapper b {
    left: 0;
    top: 0;
    color: #fff;
    font-size: 22px;
    text-transform: capitalize;
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    font-weight: 500;
    z-index: 1;
 }
.pujari-words-wrapper b.is-visible {
    position: relative;
 }
.pujari-words-wrapper b {
    opacity: 0;
}
.pujari-words-wrapper b.is-visible {
    opacity: 1;
}
.pujari-headline.clip span {
    padding: 15px 0;
    display: inline-block;
 }
.pujari-headline.clip .pujari-words-wrapper {
    overflow: hidden;
    vertical-align: top;
 }
 .arrow-down {
    width: 26px;
    height: 55px;
    bottom: 5%;
    left: 50%;
    z-index: 9;
    text-align: center;
    position: absolute;
    border: 1px solid #999;
    border-radius: 20px;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.arrow-down i {
    color: #fff;
    font-size: 22px;
    line-height: 40px;
    -webkit-animation: arrowdown 2s infinite;
    -moz-animation: arrowdown 2s infinite;
    -ms-animation: arrowdown 2s infinite;
    -o-animation: arrowdown 2s infinite;
    animation: arrowdown 2s infinite;
}
.arrow-down i:hover {
    padding-top: 10px;
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
}
@keyframes arrowdown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 50%, 0);
  }
}
/*=============================================
            End Banner Area
=============================================*/





/*=============================================
            Strat Service Area
=============================================*/
.service-area {
    padding-bottom: 75px;
}
.single-service-item {
    padding: 18px;
    text-align: center;
}
.service-icon {
    display: block;
    margin-bottom: 15px;
}
.service-icon i {
    color: #3ab;
    font-size: 40px;
}
.service-title > h5 {
    font-size: 18px;
    padding-bottom: 10px;
}
.single-service-item:hover {
    cursor: pointer;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
    -moz-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
    -ms-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
    -o-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.27);
}
/*=============================================
            End Service Area
=============================================*/


/*=============================================
            Start Preloader
=============================================*/
.loader-overlay {
    background-color: rgba(255, 255, 255, 1);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}
.preloader {
    background: #333;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999999;
}
.preloader-inner-area {
    height: 100%;
    position: relative;
    width: 100%;
}
.l-preloader {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
.c-preloader {
    width: 60px;
    height: 60px;
    position: relative;
}
.c-preloader::before {
    content: '';
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    background-color: #333;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    animation-name: preloading;
    animation-duration: 1.2s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.c-preloader::after {
    content: '';
    width: 60px;
    height: 60px;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    background-color: #333;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    animation-name: preloading;
    animation-duration: 1.2s;
    animation-delay: -0.6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes preloading {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}
/*=============================================
            End Preloader
=============================================*/