/* -----------------------------------------------------------
    Author       : Tanvirul Haque
    Template Name: Persona - Onepage CV/Resume Template
    Version      : 1.1
------------------------------------------------------------*/
/*============================================================
    CSS TABLE OF CONTENTS
==============================================================
    01. GENAREL CSS STYLE
    02. START HEADER AREA CSS STYLE
    03. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
    04. START ABOUT AREA CSS STYLE
    05. START RESUME AREA CSS STYLE
    06. START SERVICES AREA CSS STYLE
    07. START WHY CHOOSE ME AREA CSS STYLE
    08. START PORTFOLIO AREA CSS STYLE
    09. START HIRE ME, COUNTER FEATURE & TESTIMONIAL CSS STYLE
	10. START HOW I WORK AREA STYLECSS STYLE
	11. START PRICING AREA STYLECSS STYLE
    12. START BLOG AREA CSS STYLE
    13. START CONTACT AREA CSS STYLE
    14. START FOOTER AREA CSS STYLE
	15. START BLOG PAGE CSS STYLE
	16. START PROJECT PAGE CSS STYLE
=============================================================*/
/*
* -------------------------------------------------------------
*    01. GENAREL CSS STYLE
* -------------------------------------------------------------
*/
body {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 13px;
    background-color: #fff;
    font-family: 'Poppins',sans-serif;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #333;
    font-weight: 800;
    letter-spacing: 1px;
    /*text-transform: uppercase;*/
    font-family: Raleway, sans-serif;
}
a {
    text-decoration: none;
    font-family: "Montserrat", 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: 90px 0 }
.section-title { margin-bottom: 30px }
.section-title h2 {
    margin: 0 0 20px 0;
    color: #333;
    z-index: 1;
    font-size: 36px;
    font-weight: 800;
    padding: 10px 15px;
    position: relative;
    display: inline-block;
}
.section-title h2:before {
    position: absolute;
    content: "";
    height: 50%;
    width: 50%;
    left: 0;
    top: 0;
    z-index: -1;
    border-top: 4px solid #4f54f8;
    border-left: 4px solid #4f54f8;
}
.section-title h2:after {
    position: absolute;
    content: "";
    height: 50%;
    width: 50%;
    bottom: 0;
    right: 0;
    z-index: -1;
    border-bottom: 4px solid #4f54f8;
    border-right: 4px solid #4f54f8;
}
.section-title p {
    margin: auto;
    /* width: 80%;*/
}
.button{
	font-family: "Montserrat",sans-serif;
	text-transform: uppercase;
	display: inline-block;
	background: #4f54f8;
	padding: 12px 20px;
	position:relative;
	font-size:12px;
	border:none;
	color: #fff;
	letter-spacing:1px;
	box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
	-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: #333 none repeat scroll 0 0;
	position: absolute;
	content: "";
	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;
	z-index: -1;
}
.button:hover {	color:#fff }
.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 {
	position:fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/preloader.gif) center no-repeat #fff; 
}
/*
* -------------------------------------------------------------
*    01. END GENAREL CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    02. START HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
.header-area { height: 100% }
.header-img-one { background: url(../img/bg/sample2.jpg) } /* TODO SAMPLE BACK PHOTO */
.header-img-two { background: url(../img/bg/sample2.jpg) } /* TODO SAMPLE BACK PHOTO */
.header-bg {
    background-size: cover;
    position: relative;
    height: 100%;
    z-index: 1;
}
.header-bg:after {
    position: absolute;
    background-image: linear-gradient(to right, #360b7b 0%, #003a9c 100%);
    /*background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;*/
    opacity: 0.6;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
}
.header-display-table {
    display: table;
    height: 100%;
    width: 100%;
}
.header-display-table-cell {
    vertical-align: middle;
    display: table-cell;
    text-align: left;
}
.header-text h3 {
    color: #fff;
    font-size: 20px;
}
.header-text h2 {
    color: #fff;
    margin: 15px 0;
    font-size: 60px;
    font-weight: 600;
    font-family: Raleway, sans-serif;
}

.header-text h2 .typed {
    font-weight: 800;
}

.typed-cursor {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -webkit-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink { 
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    50% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}
@-webkit-keyframes blink { 
    0% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    50% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
    100% {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}
.social-icon { margin-bottom: 20px }
.social-icon a i {
    height: 35px;
    width: 35px;
    color: #fff;
    font-size: 20px;
    line-height: 35px;
    text-align: center;
    -webkit-transition: all .36s ease 0s;
    transition: all .36s ease 0s;
}
.social-icon a:hover i {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.greet {
	color: #fff;
	margin-bottom: 10px;
    font-family: Raleway, sans-serif;
}
.greet strong {
    background: #262935;
    padding: 4px 10px;
    /*font-size: 16px;*/
}

.description {
	font-size: 16px;
	color: #fff;
}

/*
* -------------------------------------------------------------
*    02. END HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    03. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
.header-top-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 111;
    -webkit-transition: all 0.36s ease-out;
    transition: all 0.36s ease-out;
}
.navbar-default {
    background: none;
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
    padding: 15px 0;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s 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: "Montserrat",sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    -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: #4f54f8 }
.mainmenu li a {
    font-family: "Montserrat",sans-serif;
    text-transform: uppercase;
    color: #fff !important;
    font-weight: 400;
    font-size: 12px;
    margin: 0 5px;
    -webkit-transition: .36s;
    transition: .36s;
}
.mainmenu ul.nav.navbar-nav li a:hover { color: #4f54f8 !important }
.mainmenu ul.nav.navbar-nav li.active:before {
    position: absolute;
    content: "";
    z-index: -1;
    height: 50%;
    width: 50%;
    left: 0;
    top: 0;
    border-top: 2px solid #4f54f8;
    border-left: 2px solid #4f54f8;
}
.mainmenu ul.nav.navbar-nav li.active:after {
    position: absolute;
    content: "";
    z-index: -1;
    height: 50%;
    width: 50%;
    bottom: 0;
    right: 0;
    border-bottom: 2px solid #4f54f8;
    border-right: 2px solid #4f54f8;
}
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.menu-bg {
    background: #fff;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
}
.menu-bg .navbar-default { padding: 10px 0 }
.menu-bg .navbar-brand {
    color: #4e4e4e !important;
    font-size: 24px;
}
.menu-bg .mainmenu .navbar-nav li a {
    color: #333 !important;
    -webkit-transition: .36s;
    transition: .36s;
}
/*
* -------------------------------------------------------------
*    03. END BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    04. START ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
.about-slide .carousel-indicators { bottom: 5px }
.about-text { margin-bottom: 40px }
.about-text h3,
.about-info h3,
.skills-progress h3 {
    margin-bottom: 10px;
    font-size: 22px;
}
.about-icon {
	margin-bottom: 60px;
	padding: 25px;
	position: relative;
	border: 1px solid rgba(238, 238, 238, 0.65);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
    background: #fff;
}
.about-icon:before{
	position: absolute;
    content: "";
    height: 25%;
    width: 25%;
    left: 10px;
    top: 10px;
    border-top: 1px solid #4f54f8;
    border-left: 1px solid #4f54f8;
}
.about-icon:after{
    position: absolute;
    content: "";
    height: 25%;
    width: 25%;
    bottom: 10px;
    right: 10px;
    border-bottom: 1px solid #4f54f8;
    border-right: 1px solid #4f54f8;
}
.about-icon i {
    background: #4f54f8 none repeat scroll 0 0;
    color: #fff;
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    border-radius: 30px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}
.about-icon h4 {
    font-size: 16px;
    margin: 15px 0 10px;
}
.about-icon p {
    font-size: 12px;
}
.about-info ul { margin-bottom: 20px }
.about-info ul li { line-height: 2 }
.about-info ul li span {
    margin-right: 10px;
    text-transform: uppercase;
}
.skills-progress { overflow: hidden }
.skills-progress .progress {
    height: 6px;
    background: #ddd;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    position: relative;
    margin: 40px 0 0 0;
}
.skills-progress .progress-bar {
    background: #4f54f8;
    box-shadow: none;
}
.skills-progress .progress .lead {
    left: 0;
    top: -25px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    text-transform: uppercase;
}

/*
.about-info {
    margin: 0;
    padding: 0;
    margin-bottom: 25px;
}

.about-info li {
    display: inline-block;
    width: 49%;
}

.about-info li span {
    font-family: Raleway, sans-serif;
    font-weight: 700;
    margin-right: 10px;
    float: left;
}

.about-info li p {
	line-height: normal;
}
*/

.about-info li span {
    font-family: Raleway, sans-serif;
    font-weight: 800;
    margin-right: 10px;
}

.about-role {
	font-size: 18px;
	margin-bottom: 10px;
}

.profile-img{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    /*border-radius: 150px;*/
    overflow: hidden;
    margin-bottom: 35px;
    margin-right: 30px;
/*
    box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.38);
    -webkit-box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.38);
    -moz-box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.38);
    box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.38);
*/
}

.profile-img img{
    height: 100%;
}

.about-area p {
	margin-bottom: 20px;
}

/*
* -------------------------------------------------------------
*    04. END ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    05. START RESUME AREA CSS STYLE
* -------------------------------------------------------------
*/
.edu-title i,
.exp-title i {
    color: #e1e1e1;
    display: block;
    font-size: 100px;
    margin-top: 30px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
}
.edu-title p,
.exp-title p {
    color: #636363;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    display: inline-block;
    border-bottom: 3px solid #4f54f8;
}
.single-education,
.single-experience,
.single-service {
	background-color: #fff;
    position: relative;
    padding: 50px 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(238, 238, 238, 0.65);
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
    -webkit-transition: 0.36s;
    transition: 0.36s;
}
.single-education:before,
.single-experience:before,
.single-service:before {
    position: absolute;
    content: "";
    height: 25%;
    width: 25%;
    left: 10px;
    top: 10px;
    border-top: 1px solid #4f54f8;
    border-left: 1px solid #4f54f8;
}
.single-education:after,
.single-experience:after,
.single-service:after {
    position: absolute;
    content: "";
    height: 25%;
    width: 25%;
    bottom: 10px;
    right: 10px;
    border-bottom: 1px solid #4f54f8;
    border-right: 1px solid #4f54f8;
}
.single-experience { margin-bottom: 0 }
.single-education i,
.single-experience i,
.single-service i {
    color: #4f54f8;
    font-size: 40px;
    margin: 5px auto;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-education p,
.single-experience p {
    margin: 0;
    color: #ccc;
    font-size: 16px;
    font-weight: 700;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-education h2,
.single-experience h2{
    font-size: 18px;
    margin: 10px auto;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-education h5,
.single-experience h5 {
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.single-education:hover,
.single-experience:hover,
.single-service:hover {
    border: 1px solid rgba(36, 195, 248, 0.3);
    background: #4f54f8;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.single-education:hover.single-education:before,
.single-experience:hover.single-experience:before,
.single-service:hover.single-service:before,
.single-education:hover.single-education:after,
.single-experience:hover.single-experience:after,
.single-service:hover.single-service:after { border-color: #fff }
.single-education:hover.single-education i,
.single-experience:hover.single-experience i,
.single-service:hover.single-service i,
.single-education:hover.single-education p,
.single-experience:hover.single-experience p,
.single-service:hover.single-service p,
.single-education:hover.single-education h2,
.single-experience:hover.single-experience h2,
.single-service:hover.single-service h2,
.single-education:hover.single-education h5,
.single-experience:hover.single-experience h5 { color: #fff }
.education:hover .edu-title i,
.experience:hover .exp-title i { color: #4f54f8 }

.education {
	position: relative;
}
.education .timeline {
    position: relative;
    overflow: hidden;
}
.education .timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #bfbfbf;
    z-index: 1;
    display: block;
}
.education .timeline-block {
    width: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    clear: both;
    z-index: 1;
}
.education .timeline-block-right {
    float: right;
    position: relative;
    left: -8px;
}
.education .timeline-block-left {
    float: left;
    direction: rtl;
    position: relative;
    left: 8px;
}
.education .marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: #4f54f8;
    margin-top: 10px;
    z-index: 9999;
}
.education .timeline-content {
    width: 95%;
    padding: 0 15px;
    color: #000000;
}
.education .timeline-content h5 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 500;
    color: #4f54f8;
}
.education .timeline-content span {
    font-size: 15px;
    color: #000;
    font-weight: bold;
    letter-spacing: 0.5px;
}
.education .timeline-content p {
    line-height: 1.5em;
    word-spacing: 1px;
    color: #888;
}
/*
* -------------------------------------------------------------
*    05. END RESUME AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    06. START SERVICES AREA CSS STYLE
* -------------------------------------------------------------
*/
.services-area { padding-bottom: 60px }
.single-service { height: 300px }
.single-service i {
    left: 0;
    right: 0;
    top: 150px;
    position: absolute;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.single-service h2 {
    left: 0;
    right: 0;
    top: 100px;
	font-size: 20px;
    position: absolute;
    -webkit-transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.single-service p {
    position: absolute;
    margin: 5px auto;
    opacity: 0;
    top: 170px;
    right: 0;
    left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.single-service:hover i { top: 70px }
.single-service:hover h2 { top: 140px }
.single-service:hover p {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    transform: scale(1);
    -ms-transform: scale(1);
}
/*
* -------------------------------------------------------------
*    06. END SERVICES AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    07. START WHY CHOOSE ME AREA CSS STYLE
* -------------------------------------------------------------
*/
.why-choose-me{ padding-top: 0 }
.according-area { margin-top: 30px }
.panel-default .panel-heading {
    background-color: #f8f8f8;
    border-color: #eee;
    font-size: 16px;
    padding: 16px;
}

.panel-group .panel {
    border: medium none;
    border-radius: 0;
    margin-bottom: 0;
}
.panel-body {
    padding: 30px;
    border-radius: 0px;
}
.panel-heading { border-radius: 0px }
.panel-title a {
    color: #333;
    display: block;
	text-transform: capitalize;
    font-weight: 400;
}
.panel-title a:after {
    content: "\f068";
    font: 18px fontAwesome;
    float: left;
    margin-right: 20px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #4f54f8;
    height: 49px;
    width: 49px;
    margin-left: -16px;
    margin-top: -16px;
    line-height: 55px;
    text-align: center;
}
.panel-title a.collapsed:after {
    content: "\f067";
    font: 18px fontAwesome;
    float: left;
    margin-right: 20px;
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #4f54f8;
    height: 49px;
    width: 49px;
    margin-left: -16px;
    margin-top: -16px;
    line-height: 55px;
    text-align: center;
}
/*
* -------------------------------------------------------------
*    07. START WHY CHOOSE ME AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    08. START PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
.portfolio-filter ul {
    list-style: outside none none;
	margin-bottom: 10px;
    text-align: center;
}
.portfolio-filter ul li {
    color: #999;
    margin: 5px;
    cursor: pointer;
    font-size: 14px;
    padding: 10px 20px;
    display: inline-block;
    text-transform: uppercase;
    border: 1px solid rgba(238, 238, 238, 0.65);
    -webkit-transition: all 0.36s;
    transition: all 0.36s;
}
.portfolio-filter ul li.active,
.portfolio-filter ul li:hover {
    color: #fff;
    border: 1px solid rgba(36, 195, 248, .3);
    background: #4f54f8 none repeat scroll 0 0;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.grid .mix {
    display: none;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.image-wrapper {
    position: relative;
    margin-top: 30px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.image-wrapper img {
    height: auto;
    width: 100% !important;
    border-radius: 40px;
}
.image-overlay {
    background: rgba(86, 65, 222, 0.8) none repeat scroll 0 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    text-align: center;
    position: absolute;
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    border-radius: 40px;
}
.image-overlay i {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    height: 50px;
    width: 50px;
    color: #fff;
    font-size: 20px;
    margin-top: 30px;
    line-height: 50px;
    text-align: center;
    border-radius: 30px;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    -webkit-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.image-overlay h5 {
    color: #fff;
    margin: 15px 0 5px;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.image-overlay p {
    color: #fff;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
}
.image-wrapper:hover{ 
	-webkit-transform: scale(1.05);
			transform: scale(1.05);
}
.image-overlay i:hover {
    background: #fff none repeat scroll 0 0;
    color: #4f54f8;
}
.image-overlay:hover i {
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}
.image-wrapper:hover .image-overlay {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.image-wrapper:hover .image-overlay h5 {
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}
.image-wrapper:hover .image-overlay p {
	-webkit-transform: translateX(0px);
	transform: translateX(0px);
}
.portfolio-btn{ margin-top: 60px }
/*
* -------------------------------------------------------------
*    08. END PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    09. START HIRE ME, COUNTER FEATURE & TESTIMONIAL CSS STYLE
* -------------------------------------------------------------
*/
.hire-me,
.counter-feature,
.testimonial,
.services-area,
.blog-area { background: #f6f7fd }
.hire-text,
.testimonial-text { float: right }
.hire-text h2,
.counter h2,
.testimonial-text h2 {
    color: #444;
    font-size: 32px;
    font-weight: 700;
    display: inline-block;
    border-bottom: 2px solid #4f54f8;
}
.counter h2 { margin: 5px 0 }
.hire-text p { margin: 0 }
.hire-btn { margin-top: 10px }
.counter i,
.single-contact i {
    color: #fff;
    width: 50px;
    height: 50px;
    display: block;
    font-size: 22px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto 5px;
    background: #4f54f8;
    border-radius: 30px;
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.about-icon:hover i,
.counter:hover i,
.single-contact:hover i {
    background: rgba(36, 195, 248, 0.3);
    color: #4f54f8;
}
.counter p,
.single-contact p {
    text-transform: uppercase;
    font-family: "Montserrat",sans-serif;
}
.testimonial blockquote { margin: 0 20px 0 0 }
.testimonial .item p {
    font-size: 13px;
    text-align: right;
}
.testimonial .item h5 {
    color: #666;
    font-size: 12px;
    text-align: right;
    margin: 5px 0 0 0;
}
.testimonial .item:before {
    font-family: fontawesome;
    position: absolute;
    content: "\f10d";
    font-size: 70px;
    bottom: -25px;
    left: 30px;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}
/*
* -------------------------------------------------------------
*    09. END HIRE ME, COUNTER FEATURE & TESTIMONIAL CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    10. START HOW I WORK AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
.how-i-work{
	background: url(../img/bg/video-bg.jpg);
	background-size: cover;
    position: relative;
	padding: 150px 0;
    z-index: 1;
}
.how-i-work:after {
    background: rgba(552, 552, 552, 0.3) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    content: "";
    left: 0;
    top: 0;
}
.video-area h2 {
    color: #fff;
    font-size: 24px;
}
.video-area i {
	background-color: rgba(255, 255, 255, 0.6);
    border: 3px solid #fff;
	margin-top: 20px;
    font-size: 48px;
    height: 100px;
    width: 100px;
    color: #fff;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    padding-left: 15px;
	-webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
}
.video-area i:hover {
    background: #4f54f8;
    color: #fff;
    -webkit-transform: scale(1.05);
			transform: scale(1.05);
}
/*
* -------------------------------------------------------------
*    10. END HOW I WORK AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    11. START PRICING AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
.single_pricing {
	box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(238, 238, 238, 0.65);
    -webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.single_pricing h3 {
    font-size: 20px;
    padding: 30px 0;
}
.price {
	background: #e9e9e9;
	margin-bottom: 10px;
	padding: 25px 0;
	-webkit-transition: all 0.36s ease 0s;
            transition: all 0.36s ease 0s;
}
.price h4{ font-size: 52px }
.price h4 sub { font-size: 18px }
.price span { font-size: 14px }
.pricing-list {
    list-style: outside none none;
    text-align: center;
	padding: 0 25px;
}
.pricing-list li {
    border-bottom: 1px solid #eee;
    color: #161616;
    padding: 15px 0;
    -webkit-transition: all 0.3s ease 0s;
            transition: all 0.3s ease 0s;
}
.pricing-btn { padding: 20px 0 }
.single_pricing.recommended,
.single_pricing:hover {
	border: 1px solid rgba(36, 195, 248, 0.3);
    -webkit-transform: scale(1.05);
			transform: scale(1.05);
}
.single_pricing.recommended .price,
.single_pricing:hover .price { background: #4f54f8 }
.single_pricing.recommended .price h4 ,
.single_pricing:hover .price h4 { color: #fff }
/*
* -------------------------------------------------------------
*    11. END PRICING AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    12. START BLOG AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
.single-blog {
    box-shadow: 0px 8px 40px 0px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(238, 238, 238, 0.65);
    -webkit-transition: all 0.36s ease 0s;
    transition: all 0.36s ease 0s;
	margin-bottom: 30px;
}
.single-blog img {
	background: #fff;
	padding: 10px;
}
.blog-content {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 25px;
}
.blog-content span {
    font-size: 12px;
    color: #333;
}
.blog-content a h2 {
    font-size: 20px;
    margin: 5px 0 15px;
}
.blog-content a.read-more {
    color: #666;
    display: block;
    text-align: right;
    -webkit-transition: 0.36s;
			transition: 0.36s;
}
.blog-btn{ margin-top: 30px }
.single-blog:hover {
	border: 1px solid rgba(36, 195, 248, 0.3);	
	-webkit-transform: scale(1.05);
			transform: scale(1.05);
}
.single-blog:hover .blog-content a.read-more { color: #4f54f8 }
/*
* -------------------------------------------------------------
*    12. END BLOG AREA STYLECSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    13. START CONTACT AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-contact h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0;
    display: inline-block;
    border-bottom: 2px solid #4f54f8;
}
#contact-form { margin-top: 30px }
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #ccc;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    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: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #4f54f8;
    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: #333 none repeat scroll 0 0;
    color: #fff;
}
.success {
	text-align: center;
	margin: 80px 0;
	font-size: 18px;
	font-weight: bold;
}
/*
* -------------------------------------------------------------
*    13. END CONTACT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    14. START FOOTER CSS STYLE
* -------------------------------------------------------------
*/
.copyright {
    background: #4f54f8;
    color: #fff;
    padding: 60px 0;
}
.copyright p { margin: 0 }
/*
* -------------------------------------------------------------
*    14. END FOOTER CSS STYLE
* -------------------------------------------------------------
*/

/*
* -------------------------------------------------------------
*    15. SINGLE BLOG 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: 700;
	color: #fff;
}
.breadcrumb-title p,
.breadcrumb-title p a{ color: #fff }
.single-blog-details,
.comments-area { padding-bottom: 50px }
.single-blog-details h3 {
	margin: 30px 0 20px;
	font-weight: 700;
}
.single-blog-info{ margin: 0 0 20px }
.single-blog-info span {
	color: #999;
	font-size: 12px;
	margin-right: 10px;
	display: inline-block;
}
.single-blog-info span i,
.single-comment span i {
	margin-right: 5px;
	font-size: 14px;
	color: #4f54f8;
}
.comments-area h4,
.comment-form h4 {
    padding: 10px 0;
	margin-bottom: 20px;
	border-bottom: 4px double #eee;
}
.single-comment img {
	float: left;
	width: auto;
	height: 100px;
	margin-right: 15px;
	border: 5px solid #f0f0f0;
}
.single-comment h5 { margin-bottom: 10px }
.single-comment span {
	color: #999;
	display: block;
	font-size: 12px;
	margin-bottom: 10px;
}
.single-comment p {
	font-size: 13px;
	overflow: hidden;
}
.single-widget{	margin-bottom: 50px }
.search-box input{
    margin: 0;
	height: 50px;
    padding: 0 0 0 15px;
	border: 1px solid #ccc;
}
.search-box input:hover,
.search-box input:focus {	border: 1px solid #4f54f8 }
.latest-post h4,
.categories h4,
.tags h4 {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 4px double #eee;
}
.single-latest-post{ margin-bottom: 30px }
.single-latest-post a{
	color: #555;
	display: block;
	margin: 15px 0 10px;
}
.single-latest-post span {
	color: #999;
	font-size: 12px;
	display: inline-block;
}
.single-latest-post span i {
	margin-right: 5px;
	font-size: 14px;
	color: #4f54f8;
}
.categories li a {
    color: #555;
    display: block;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.categories li a:hover {
    color: #4f54f8;
}
.categories li a i {
    margin-right: 10px;
	color: #4f54f8;
}
.tags li a {
    border: 1px solid #ccc;
    color: #555;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px;
    padding: 5px 15px;
    text-transform: uppercase;    
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.tags li a:hover {
    background: #4f54f8 none repeat scroll 0 0;
    border: 1px solid #4f54f8;
    color: #fff;
}
/*
* -------------------------------------------------------------
*    15. END BLOG PAGE CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    16. SINGLE PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/
.details-single-project{ margin: 50px 0 20px }
.about-single-project h4,
.details-single-project h4 {
	border-bottom: 4px double #eee;
	margin-bottom: 20px;
	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: #4f54f8;
}
.related-projects h4 {
	border-bottom: 4px double #eee;
	margin-top: 30px;
	padding: 10px 0;
}
/*
* -------------------------------------------------------------
*    16. END PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/