/*
Template Name: Adept
Template URI: https://demos.shourav.info/static/adept/
Description: adept full responsive portfolio template, clean code and easy to use.
Author: crazyEnter
Author URI: https://shourav.info
Version: 1.0.0

[ CSS INDEX ]
===============================================
1.0 Reset Css
    1.1 Google Fonts
    1.2 Input Placeholder Color
    1.3 Heading
    1.4 Sub Heading
    1.5 Button Style
2.0 Color Code
3.0 Background Color Code
4.0 Border Color Code
5.0 Banner Layout
    5.1 Banner Overlay
    5.2 Banner Header
    5.3 Logo
    5.4 Banner Content
    5.5 Navigation Menus
    5.6 Banner Footer
6.0 Content Layout
    6.1 Extra Section
    6.2 Search Bar
    6.3 Social Link
7.0 About Section
    7.1 About Overlay
    7.2 More About
    7.3 About Skill
    7.4 Abuot Works & Edu
8.0 Services Section
9.0 Team Member
    9.1 Single Member
10.0 Price List
11.0 Portfolios Section
    11.1 Portfolios Nav
    11.2 Portfolios List
    11.3 Portfolios View
12.0 Ready To Hire
13.0 Testmonial Section
14.0 Best Clients
15.0 Counter Up
16.0 Single Page
17.0 Contact Section
    17.1 Contact Details
    17.2 Google Map
    17.3 Contact Form
18.0 Blog Page
    18.1 Pagination
19.0 Newsletter Section
20.0 Single Blog
    20.1 Social Share
    20.2 Post Author
    20.3 Single Navigation
    20.4 Related Blog Post
    20.5 Comments
    20.6 Comments Form
21.0 404 Page
*/


/**************======================
1.0 Reset Css
=======================**************/


/*>>>------------------------
1.1 Google Fonts
-------------------------<<<*/
@import url('https://fonts.googleapis.com/css?family=Raleway:400,600|Roboto:400,600,700');


* {
    box-sizing: border-box;
}
body {
    font-family: 'Raleway', sans-serif;
    color: #333333;
    font-size: 16px;
    line-height: 1.5em;
}
::-moz-selection {
    background: #0078D7;
    text-shadow: none;
    color: #fff;
}
::selection {
    background: #0078D7;
    text-shadow: none;
    color: #fff;
}
a {
    color: #333333;
    transition: all 0.3s linear 0s;
    -webkit-transition: all 0.3s linear 0s;
    text-decoration: none;
    font-family: 'Raleway', sans-serif;
}
button {
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333333;
    font-weight: 600;
}
h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
button,
a,
a:hover,
a:focus,
a:active {
    border: medium none;
    outline: medium none;
    text-decoration: none;
}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
}
p {
    font-size: 16px;
    line-height: 26px;
}
ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.auto-hide {
    opacity: 0;
    z-index: -9;
}
.owl-dots {
    bottom: -5px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}
.owl-dot {
    background: #898989 none repeat scroll 0 0;
    border-radius: 3px;
    display: inline-block;
    height: 8px;
    margin: 0 5px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    width: 25px;
}
.owl-dot.active,
.owl-dot:hover {
    width: 15px;
}

/*>>>------------------------
1.2 Input Placeholder Color
-------------------------<<<*/
input:-moz-placeholder {
    color: #333333;
}
input::-webkit-input-placeholder {
    color: #333333;
}
#searchform input:-moz-placeholder {
    color: #FFFFFF;
}
#searchform input::-webkit-input-placeholder {
    color: #FFFFFF;
}

/*>>>------------------------
1.3 Heading
-------------------------<<<*/

.heading {
    position: relative;
}
.heading::before {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid;
    border-radius: 50%;
    bottom: -1px;
    content: "";
    height: 6px;
    left: 0px;
    position: absolute;
    width: 6px;
    z-index: 2;
}
.heading h2 {
    font-weight: 700;
    left: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    position: relative;
    text-transform: uppercase;
    margin-top: 0px;
}
.heading h2::before {
    border-radius: 0 0 100%;
    bottom: 2px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.heading h2::after {
    background: #bbbbbb none repeat scroll 0 0;
    border-radius: 0 0 100%;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

/*>>>------------------------
1.4 Sub Heading
-------------------------<<<*/
.sub-heading {
    display: inline-block;
    padding-bottom: 5px;
    position: relative;
}
.sub-heading::before{
    background: #cccccc none repeat scroll 0 0;
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    bottom: 10px;
    content: "";
    height: 6px;
    left: -1px;
    position: absolute;
    width: 6px;
    z-index: 3;
}
.sub-heading::after {
    left: inherit;
    right: -1px;
}
.sub-heading h3 {
    font-family: "Roboto", sans-serif;
    letter-spacing: 1px;
    margin-bottom: 20px;
    margin-top: 0px;
    position: relative;
    text-transform: uppercase;
}
.sub-heading h3::before,
.sub-heading h3::after {
    bottom: -15px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
    border-radius: 0 0 100%;
}
.sub-heading h3::after {
    background: #cccccc none repeat scroll 0 0;
    bottom: -13px;
}

/*>>>------------------------
1.5 Button Style
-------------------------<<<*/

.freel {
    width: 100%;
    position: relative;
}
.freel a {
    position: absolute;
    font-size: 16px;
    top: 10px;
    color: #FFFFFF;
    font-family: 'Raleway', sans-serif;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.button {
    border-radius: 4px;
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    margin: 0 10px;
    padding: 11px;
    text-transform: uppercase;
    min-width: 150px;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 0.5px;
}
.button:hover,
.button:focus,
.button:active {
    color: #333333;
}
.button i {
    margin-right: 10px;
}
a.button.body-btn::before {
    border: 1px solid #333333;
}

.button.body-btn {
    margin-top: 10px;
    color: #FFFFFF;
}
a.button.body-btn:hover {
    background: #333333 none repeat scroll 0 0;
    color: #FFFFFF;
}

/**************======================
2.0 Color Code
=======================**************/
.color,
a:hover,
#nav-menu li.active a i,
#nav-menu li a:focus i,
#nav-menu li a:hover i,
.type-wrap b,
.social li a:hover i,
.social li a:focus i,
.social li a:active i,
.freel a span:hover,
.my-about-list li i,
.service-heading i,
.price-content li i,
.member-social .social li a i,
.portfolios-nav li i,
.single-fac i,
.rating li i,
.client-designation a,
.single-page-content p a,
.single-page-content p b,
#contact-list li i,
.meta span i,
.read-more,
.author-info a:hover h3,
.author-social .social a i,
.single-navigation div a h4,
.social-share li a:hover,
a.blog-title h2:hover,
.comment-details p a,
.time i,
.name a:hover,
.btn.reply,
.sidebar-heading h2,
.single-popular a:hover h3,
.scroll-top i,
.not-found-content p a {
    color: #F2784B;
}

/**************======================
3.0 Background Color Code
=======================**************/
.color-bg,
.shine:before,
.heading h2::before,
.freel .preloader-wave-effect::before,
.freel .preloader-wave-effect::after,
.about-list li a i:after,
.about-list li::after,
.about-list li a i:hover,
.about-list li.active a i,
.progress .progress-value,
.single-service:hover .service-heading,
.single-service:hover .service-heading i,
.portfolios-nav li span,
.portfolios-nav li::before,
.portfolios-nav li.active:before,
.single-item figcaption a,
.button.showMore:hover,
.owl-dot.active,
.owl-dot:hover,
.rating::before,
.member-skill .bar .bar_active,
.single-count i,
.portfolio-related .owl-nav div,
.sub-heading h3::before,
.single-price .active,
.price-icon,
.buy-servie:hover,
.single-price:hover .price-heading,
.single-price:hover .price-footer,
.single-sidebar .search-button,
.tags-list li a:hover,
.tags-list li.active a,
.paginate span,
.paginate a:hover,
.cagegory-list li a span,
.subscribe,
.scroll-top:hover,
.contact-overlay,
.cssload-thecube .cssload-cube:before {
    background-color: #F2784B;
}

/**************======================
4.0 Border Color Code
=======================**************/
.heading::before,
.about-list li a i,
.progress .progress-value,
.portfolios-nav>li>span::before,
.single-count i::after,
.modal-text h2,
.sub-heading::before,
.sub-heading::after,
.client-quote .single-quote img,
.contact-input label [type="text"]:focus,
.contact-input label input[type="email"]:focus,
.contact-input label textarea:focus,
.blog-thumbnail,
blockquote,
.comments-body>h3,
.comments-response input[type="text"]:focus,
.comments-response input[type="email"]:focus,
.comments-response input[type="url"]:focus,
.comments-response textarea:focus {
    border-color: #F2784B;
}

/**************======================
5.0 Banner Layout
=======================**************/
.banner-layout {
    background-image: url("assets/img/banner.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    position: fixed;
    width: 40%;
    z-index: -4;
}
#particles-js {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.scroll-down {
    display: none;
}

/*>>>------------------------
5.1 Banner Overlay
-------------------------<<<*/
.banner-overlay {
    background: #000000 none repeat scroll 0 0;
    opacity: 0.75;
    height: 100vh;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

/*>>>------------------------
5.2 Banner Header
-------------------------<<<*/
header.header-area {
    background: #323232 none repeat scroll 0 0;
    position: relative;
    width: 100%;
    z-index: 3;
    height: 80px;
}

/*>>>------------------------
5.3 Logo
-------------------------<<<*/
.logo {
    height: auto;
    max-width: 100%;
    width: 100px;
    max-height: 80px;
}
.logo a img {
    height: 80px;
    width: auto;
}


/*>>>------------------------
5.4 Banner Content
-------------------------<<<*/
.main-banner {
    display: table;
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: inherit;
    width: 100%;
    z-index: 0;
    text-align: center;
    padding: 0px 30px;
    -webkit-transition: opacity 1s, opacity 1s, -webkit-transform 1s;
    /* Safari */
    transition: opacity 1s, opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, opacity 1s, transform 1s;
    transition: opacity 1s, opacity 1s, transform 1s, -webkit-transform 1s;
}
.banner-content {
    display: table-cell;
    vertical-align: middle;
}
.banner-content h1 {
    color: #ffffff;
    font-size: 55px;
    line-height: 50px;
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.banner-content h1 span {
    font-size: 22px;
    display: block;
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
}
.banner-content h2 {
    color: #ffffff;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    margin: 10px 0 20px;
    letter-spacing: 1.5px;
    text-transform: capitalize;
    font-size: 26px;
}
.banner-content h2 span b {
    font-weight: 400;
    letter-spacing: 1.5px;
}

/*>>>------------------------
5.5 Navigation Menus
-------------------------<<<*/
.navbar-menu {
    opacity: 0;
    -webkit-transition: all 1.2s ease 0s;
    transition: all 1.2s ease 0s;
    top: -200%;
    position: absolute;
    left: inherit;
    width: 100%;
}
.navbar-menu.menu-on {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    display: table;
    height: 100%;
    min-height: 100%;
    opacity: 1;
    position: absolute;
    width: 100%;
    z-index: 1;
    top: 0px;
}
.navigation-menu {
    float: right;
}
.menu-text {
    margin: 21px 5px;
    color: #BABABA;
    text-transform: uppercase;
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 50px 8px 5px;
    position: absolute;
    right: 10px;
    border-radius: 4px;
}
.navbar-menu.menu-on>ul#nav-menu {
    display: table-cell;
    vertical-align: middle;
}
#nav-menu li {
    margin: 10px auto;
    position: relative;
    width: 250px;
}
#nav-menu li::after {
    background: #ffffff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 40px;
    opacity: 0.75;
    position: absolute;
    -webkit-transition: width 0.3s linear 0s;
    transition: width 0.3s linear 0s;
    width: 0;
}
#nav-menu li:hover::after,
#nav-menu li.active:after {
    width: 220px;
}
#nav-menu li:hover a,
#nav-menu li.active a {
    display: block;
    opacity: 0.75;
    width: 100%;
}
#nav-menu li a {
    color: #D5D2D2;
    font-size: 14px;
    line-height: 30px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}
#nav-menu li a i {
    color: #ffffff;
    display: block;
    float: left;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    text-align: center;
    width: 30px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}

/*>>>------------------------
5.6 Banner Footer
-------------------------<<<*/
.footer-content {
    display: none;
}
footer {
    bottom: 0;
    left: inherit;
    padding: 20px 50px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 3;
}
footer p {
    color: #ebebeb;
    margin-bottom: 0;
}
footer a.color:hover,
footer a.color:focus {
    color: #dddddd;
}


/*======================
6.0 Content Layout
=======================*/
.content-layout {
    left: 40%;
    overflow: hidden;
    position: absolute;
    width: 60%;
}
.content-head {
    background: #323232 none repeat scroll 0 0;
    color: #ffffff;
    height: 80px;
    padding: 20px 0;
    width: 100%;
}
.single-content {
    overflow: hidden;
    padding: 80px 40px;
}
.bg-gray {
    background-color: #F5F5F5;
    width: 100%;
}

/*>>>------------------------
6.1 Extra Section
-------------------------<<<*/
.extra-section {
    overflow: hidden;
    position: relative;
    text-align: center;
}
.bg-background {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
    width: 100%;
    background-attachment: fixed;
}
.section-overlay {
    height: 100%;
    left: 0;
    opacity: 0.60;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.extra-section .team-area,
.service-price .sub-heading, .coundown-area .sub-heading {
    text-align: left !important;
}

.ready-hire .sub-heading::before,
.coundown-area .sub-heading::before,
.newsletter .sub-heading::before{
    display: none;
}
.ready-hire .sub-heading h3::before,
.ready-hire .sub-heading h3::after,
.coun-down .sub-heading h3:before,
.coun-down .sub-heading h3:after,
.newsletter .sub-heading h3:before,
.newsletter .sub-heading h3:after {
    border-radius: 100%;
}

.ready-hire,
.coun-down,
.newsletter {
    position: relative;
    z-index: 99;
}

/*>>>------------------------
6.2 Search Bar
-------------------------<<<*/
#searchform {
    position: relative;
    max-width: 100%;
}
#searchform div {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}
button.search-button.show-search {
    right: 100px;
    left: inherit;
    width: 100px;
    z-index: 999;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
}
button.search-button.show-search:hover {
    color: #FFFFFF;
}
button.search-button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-width: 0px;
    color: #BABABA;
    font-size: 28px;
    left: 5px;
    position: absolute;
    right: inherit;
    top: 0;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    width: auto;
    z-index: 9;
    height: 100%;
    padding: 0px;
}
#searchform input[type="search"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 0px solid;
    padding: 7px 5px 7px 40px;
    position: relative;
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    width: 100%;
    z-index: 99;
    font-size: 16px;
}
#searchform input[type=search]:focus {
    right: 0px;
    left: inherit;
    padding-left: 10px;
    padding-right: 100px;
    border: 0px solid;
    outline: 0px;
}

/*>>>------------------------
6.3 Social Link
-------------------------<<<*/
.social li {
    display: inline-block;
}
.social li a {
    color: #BABABA;
    display: block;
    font-size: 18px;
    padding: 8px 5px;
}

/**************======================
7.0 About Section
=======================**************/
.about-image {
    height: auto;
    position: relative;
    width: 100%;
    margin-top: 15px;
}
.about-image::after {
    position: absolute;
    border: 6px solid #CCCCCC;
    content: "";
    right: -10px;
    width: 100%;
    height: 100%;
    top: -10px;
    z-index: -1;
}

/*>>>------------------------
7.1 About Overlay
-------------------------<<<*/
.about-hover {
    border-bottom: 1px solid #333;
    background: rgba(255, 255, 255, 0.25);
    height: 100px;
    width: 100%;
    position: absolute;
    z-index: 99;
    bottom: 0;
    text-align: center;
    padding: 10px;
}
.about-hover h3 {
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
}
.about-hover h4 {
    font-size: 14px;
    color: #ddd;
}
.button.shine.body-btn.cv-btn {
    width: 100%;
    text-align: center;
    margin: 10px 0px 0px;
}
.button.shine.body-btn.cv-btn::before {
    border-radius: 0px !important;
    border: 0px;
}
.about-me h3,
.tab-pane h3 {
    border-bottom: 1px solid #dddddd;
    display: inline-block;
    margin-bottom: 5px;
    padding-bottom: 5px;
    text-transform: capitalize;
    font-size: 18px;
}
.about-me a,
.tab-pane a {
    font-weight: 600;
    text-decoration: underline;
}

/* about links */
.my-about-list {
    margin-top: 30px;
}
.my-about-list li {
    display: inline-block;
    margin-right: 20px;
    font-family: "Roboto";
    font-weight: 400;
    font-size: 15px;
}
.my-about-list li:last-child {
    margin-right: 0px;
}

.my-about-list li i {
    margin-right: 7px;
}

/*>>>------------------------
7.2 More About
-------------------------<<<*/
.tab-content {
    padding-right: 15px;
    position: relative;
    z-index: 0;
}
.dt-tab-content-no {
    color: #ffffff;
    font-size: 10em;
    height: 250px;
    left: 0;
    line-height: 2em;
    margin: -125px auto 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 250px;
    z-index: -1;
}
.more-about-me {
    background: #f5f5f5 none repeat scroll 0 0;
    border: 1px solid #dddddd;
    height: 100%;
    overflow: hidden;
    width: 100%;
}
.nav.about-list {
    background: #F2F2F2 none repeat scroll 0 0;
    border: 6px solid #ffffff;
    border-radius: 0 30px 30px 0;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
.about-list li:last-child {
    margin-bottom: 20px;
}
.about-list li:last-child::after {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.about-list li::after {
    content: "";
    height: 100%;
    left: 50%;
    margin-left: -1px;
    position: absolute;
    top: 90px;
    width: 2px;
    z-index: 0;
}
.tooltips {
    border: 1px solid rgba(51, 51, 51, 0.5);
    border-radius: 6px;
    color: #ffffff;
    font-size: 13px;
    left: 0;
    opacity: 0;
    padding: 5px 15px;
    position: relative;
    top: 10px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 100%;
}
.about-list li:hover .tooltips,
.about-list li.active .tooltips {
    visibility: visible;
    opacity: 1;
}
.nav.about-list>li>a:hover,
.nav.about-list>li>a:focus {
    background-color: rgba(0, 0, 0, 0);
    text-decoration: none;
}
.about-list li a i {
    background: #ffffff none repeat scroll 0 0;
    border: 2px solid;
    border-radius: 50%;
    color: #333333;
    display: block;
    font-size: 22px;
    height: 60px;
    line-height: 61px;
    margin: 4px auto;
    position: relative;
    top: 0;
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    width: 60px;
    z-index: 1;
}
.about-list li a i:after {
    border: 1px solid rgba(51, 51, 51, 0.5);
    border-radius: 50%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
    width: 100%;
    z-index: -1;
}
.about-list li a i:hover,
.about-list li.active a i {
    color: #EFEFEF;
}
.about-list li a i:hover:after,
.about-list li.active a i:after,
{
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transform: scale(1);
    transform: scale(1);
}
.tab-pane h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 10px;
}

/*>>>------------------------
7.3 About Skill
-------------------------<<<*/
.progress-title {
    font-size: 16px;
    font-weight: 400;
    margin: 0 0 10px;
}
.progress {
    background: #dddddd none repeat scroll 0 0;
    border-radius: 6px;
    box-shadow: none;
    height: 5px;
    margin-bottom: 25px;
    overflow: visible;
}
.progress-bar {
    border-radius: 6px;
    opacity: 0;
    position: relative;
}
.progress .progress-value {
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    color: #333333;
    background: #FFFFFF !important;
    display: block;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
}
@-webkit-keyframes animate-positive {
    0% {
        width: 0%;
    }
}

@keyframes animate-positive {
    0% {
        width: 0%;
    }
}


/*>>>------------------------
7.4 Abuot Works & Edu
-------------------------<<<*/
.works-edu-list {
    overflow: hidden;
}
.works-edu-single {
    margin-bottom: 5px;
}
.works-edu-single h4 {
    border-bottom: 1px solid #999999;
    display: inline-block;
    font-size: 16px;
    line-height: 21px;
    margin-bottom: 5px;
    padding-bottom: 3px;
    text-transform: uppercase;
}
.works-edu-single h4 span {
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    margin-left: 5px;
    font-size: 16px;
    text-transform: capitalize;
}

/**************======================
8.0 Services Section
=======================**************/
.single-service {
    margin-bottom: 30px;
    margin-top: 20px;
}
.service-heading {
    background: #eee;
    padding: 5px 10px;
    position: relative;
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.service-heading i {
    float: left;
    font-size: 44px;
    line-height: 90px;
    margin-right: 40px;
    position: absolute;
    background: #EEEEEE;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    top: -20px;
    left: -10px;
    border: 1px solid #ddd;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.service-heading h4 {
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    margin-left: 80px;
}
.service-body {
    background: #F9F7F7;
    padding: 20px 20px 5px;
    box-shadow: 0px 4px 7px -3px #ddd;
}
.service-body p {
    font-size: 15px;
    line-height: 24px;
}
.single-service:hover .service-heading h4,
.single-service:hover .service-heading i {
    color: #FFF;
}

/**************======================
9.0 Team Member
=======================**************/
.team-area {
    background-image: url(assets/img/parallax-background-02.jpg);
}
.section-overlay.team-overlay {
    background: #FFFFFF;
    opacity: 0.5;
}
.team-members {
    position: relative;
    width: 100%;
    z-index: 999;
}
.team-list {
    overflow: hidden;
    padding: 20px 0 50px;
    text-align: left;
    width: 100%;
}

/*>>>------------------------
9.1 Single Member
-------------------------<<<*/
.single-member {
    border: 1px solid #cccccc;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.26);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.member-image {
    padding-bottom: 70px;
}
.member-image img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
    display: inline-block;
}
.single-member:hover .member-image img {
    opacity: 0.6;
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
}
.member-info {
    background-color: #ffffff;
    max-height: 100%;
    left: inherit;
    margin-top: -70px;
    padding: 20px;
    position: absolute;
    top: 100%;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
    overflow: hidden;
}
.single-member:hover .member-info {
    margin-top: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    left: inherit;
}
.member-name-role {
    padding-bottom: 5px;
}
.member-name-role h3 {
    font-size: 18px;
    margin: 0;
}
.member-name-role span {
    font-size: 13px;
    padding: 0;
}
.member-skill {
    border-color: #cccccc;
    border-style: solid;
    border-width: 1px 0;
    padding: 5px 0;
}
.member-skill>ul {
    margin: 20px 0;
}
.member-skill li {
    margin-top: 10px;
}
.bar-label {
    display: block;
    font-size: 14px;
}
.bar {
    background: #dddddd none repeat scroll 0 0;
    border-radius: 6px;
}
.member-skill .bar .bar_active {
    border-radius: 10px;
    height: 7px;
    position: relative;
    -webkit-transition: width 2s cubic-bezier(0.26, 0.765, 0.07, 1.095) 0.2s;
    transition: width 2s cubic-bezier(0.26, 0.765, 0.07, 1.095) 0.2s;
    width: 0;
}
.member-social {
    bottom: 20px;
    left: 20px;
    position: absolute;
    width: 100%;
}
.member-social .social li a:hover i {
    color: #333333;
}

/**************======================
10.0 Price List
=======================**************/
.service-price {
    overflow: hidden;
    position: relative;
}
.single-price {
    border: 1px solid #dddddd;
    border-radius: 6px;
    box-shadow: 0 1px 1px #333333;
    position: relative;
    background: #FFFFFF;
    margin-bottom: 30px;
    text-align: center;
}
.single-price:hover {
    cursor: crosshair;
}
.price-heading {
    background: #333333 none repeat scroll 0 0;
    color: #ffffff;
    margin-bottom: 80px;
    padding: 25px 15px 80px;
    position: relative;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 6px 6px 0px 0px;
}
.price-heading h4 {
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
    text-transform: uppercase;
}
.price-heading p {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-weight: 700;
}
.price-heading span {
    font-size: 26px;
    font-weight: 700;
    margin-right: 10px;
    position: relative;
}
.price-heading span::after {
    content: "/";
    font-size: 22px;
    font-weight: 400;
    margin-right: 5px;
    position: absolute;
    right: -17px;
    top: 5px;
}
.price-icon i {
    font-size: 40px;
    line-height: 80px;
    margin: 0 auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.price-icon {
    border: 2px solid #ffffff;
    bottom: -40px;
    height: 80px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 80px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.single-price:hover .price-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.single-price:hover .price-icon i {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
.price-list {
    margin-top: 30px;
}
.price-content {
    padding: 0 15px;
    text-align: left;
}
.price-content li {
    border-top: 1px solid #dddddd;
    font-size: 14px;
    padding: 10px 0;
}
.price-content li:first-child {
    border: 0 solid;
}
.price-content li i {
    font-size: 13px;
    margin-right: 10px;
}
.price-footer {
    background: #333333 none repeat scroll 0 0;
    margin-top: 10px;
    padding: 25px 15px;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border-radius: 0px 0px 6px 6px;
}
.buy-servie {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 6px;
    color: #333333;
    padding: 10px 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    border: 1px solid #FFF;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.buy-servie:hover {
    color: #FFFFFF;
    background: #333;
    border-color: #333333;
}

/**************======================
11.0 Portfolios Section
=======================**************/
/*>>>------------------------
11.1 Portfolios Nav
-------------------------<<<*/

.portfolios-nav {
    padding-top: 20px;
}
.portfolios-nav li {
    cursor: pointer;
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
    padding: 8px 10px;
    position: relative;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.portfolios-nav li:hover,
.portfolios-nav li.is-checked {
    color: #FFF;
}
.portfolios-nav li::before {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: -1;
}
.portfolios-nav li:hover:before,
.portfolios-nav li.is-checked::before {
    border-radius: 6px;
    color: #ffffff;
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    visibility: visible;
}
.portfolios-nav li i {
    margin-right: 5px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.portfolios-nav li:hover i,
.portfolios-nav li.is-checked i {
    color: #FFF;
}
.portfolios-nav li span {
    border-radius: 2px;
    color: #ffffff;
    font-size: 12px;
    left: inherit;
    line-height: 20px;
    opacity: 0;
    padding: 2px 10px;
    position: absolute;
    top: -28px;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    visibility: hidden;
}
.portfolios-nav li span::before {
    border-left: 5px solid rgba(0, 0, 0, 0);
    border-right: 5px solid rgba(0, 0, 0, 0);
    border-top-width: 5px;
    bottom: -4px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    border-top-style: solid;
}
.portfolios-nav li.is-checked span {
    opacity: 1;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    visibility: visible;
}

/*>>>------------------------
11.2 Portfolios List
-------------------------<<<*/
.portfolio-list {
    margin: 30px -15px -30px;
    overflow: hidden;
}
.single-item {
    margin-bottom: 30px;
}
.single-item figure {
    overflow: hidden;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
    height: auto;
}
.single-item figure img {
    max-width: 100%;
    display: block;
    position: relative;
    -webkit-transition: -webkit-transform 0.4s;
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    width: 100%;
    height: inherit;
}
.single-item figcaption {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    background: #323232;
    height: 100%;
    width: 75%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: opacity 0.1s 0.3s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s, -webkit-transform 0.4s;
}
.single-item figcaption h3 {
    color: #ffffff;
    font-size: 18px;
    line-height: 24px;
    text-transform: uppercase;
}
.single-item figcaption span{
    color: #FFFFFF;
}
.link-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.single-item figcaption a {
    border-radius: 2px;
    color: #ffffff;
    display: inline-block;
    margin-right: 5px;
    padding: 5px 10px;
    text-align: center;
}
.single-item figcaption a:hover {
    background: #FFF;
    color: #333;
}
.single-item figcaption a:last-child {
    margin-right: 0px;
}
.single-item figure:hover img {
    -webkit-transform: translateX(25%);
    transform: translateX(25%);
}
.single-item figure:hover figcaption {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: opacity 0.1s, -webkit-transform 0.4s;
    transition: transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s, -webkit-transform 0.4s;
}
.visible_item {
    display: none;
}
.mfp-figure img.mfp-img {
    border: 10px solid #dddddd;
    padding: 0;
}

/*>>>------------------------
11.3 Portfolios View
-------------------------<<<*/
.modal-dialog {
    width: 90%;
}
.modal-header {
    background: #323232 none repeat scroll 0 0;
}
.modal-body {
    overflow: hidden;
    padding: 0;
}
.modal-content {
    background: #f5f5f5 none repeat scroll 0 0;
    border: 0 solid;
}
.modal-title {
    font-size: 25px;
    line-height: 40px;
    color: #FFF;
}
.modal-header button.close {
    color: #ffffff;
    font-size: 25px;
    margin-top: 0;
    opacity: 1;
    padding: 5px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.modal-header button.close:hover {
    color: #FFF;
    opacity: 0.8;
}
.portfolio-image img {
    height: auto;
    width: 100%;
    border: 15px solid #FAFAFA;
}
.modal-text h2 {
    border-style: solid;
    border-width: 0 0 2px;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.modal-text {
    margin: 50px 0;
    overflow: hidden;
}
.modal-right {
    border: 5px solid #dddddd;
    margin-top: 70px;
    padding: 15px;
}
.modal-right p {
    color: #ffffff;
}
.modal-right span {
    color: #f2f2f2;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
    padding-bottom: 3px;
    margin-right: 5px;
}

/**************======================
12.0 Ready To Hire
=======================**************/
.readyhire-area {
    background-image: url("assets/img/parallax-background-03.jpg");
}
.section-overlay.readyhire-opacity {
    opacity: 0.7;
    background-color: #FFFFFF;
}

/**************======================
13.0 Testmonial Section
=======================**************/
.client-quote {
    padding: 50px 0;
}
.single-quote {
    text-align: center;
}
.client-quote .single-quote img {
    border-radius: 50%;
    border-style: solid;
    border-width: 4px;
    height: 100px;
    margin: 0 auto 10px;
    width: 100px;
}
.single-quote p {
    margin-bottom: 20px;
    margin-left: 50px;
    position: relative;
}
.single-quote p::before {
    color: #333333;
    content: "\f10d";
    font-family: FontAwesome;
    font-size: 52px;
    left: -50px;
    position: absolute;
    top: 0;
}
.rating {
    position: relative;
}
.rating::before {
    border-radius: 50%;
    content: "";
    height: 1px;
    left: 50%;
    margin-left: -100px;
    position: absolute;
    top: 0;
    width: 200px;
}
.rating li {
    display: inline-block;
}
.rating li i {
    font-size: 13px;
}
.client-designation a {
    font-size: 14px;
    text-transform: uppercase;
}

/**************======================
14.0 Best Clients
=======================**************/
.best-client-area {
    margin: 30px 0;
}
.best-clients img {
    opacity: 0.5;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.best-clients img:hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/**************======================
15.0 Counter Up
=======================**************/
.coundown-area {
    background-image: url(assets/img/parallax-background-05.jpg);
}
.section-overlay.coundown-overlay {
    background-color: #FFFFFF;
    opacity: 0.5;
}
.count-list {
    overflow: hidden;
    padding: 30px 0 0;
}
.single-count i {
    border-radius: 50%;
    color: #ffffff;
    font-size: 42px;
    height: 100px;
    line-height: 100px;
    position: relative;
    width: 100px;
}
.single-count i::after {
    border-width: 3px;
    border-style: solid;
    border-radius: 100%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}
.single-count:hover i:after,
.single-count.active:hover i {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}
.single-count h4 {
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
}
.single-count h5 {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 5px;
    text-transform: uppercase;
}

/**************======================
16.0 Single Page
=======================**************/
.single-page-content img {
    height: auto;
    width: 100%;
    margin-bottom: 30px;
}
.single-page-head {
    border-bottom: 1px solid #dddddd;
    font-family: 'Roboto', sans-serif;
    font-size: 24px;
    margin: 20px 0;
    padding-bottom: 5px;
    text-transform: uppercase;
}

/**************======================
17.0 Contact Section
=======================**************/
.contact-area {
    margin-top: -70px;
}

/*>>>------------------------
17.1 Contact Details
-------------------------<<<*/
.contact-details {
    background: #f9f9f9 none repeat scroll 0 0;
    border-bottom: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    color: #333333;
    float: left;
    height: 450px;
    padding: 20px 30px 20px 65px;
    width: 40%;
    z-index: 9;
}
.contact-details h2 {
    border-bottom: 1px solid #cccccc;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 5px;
}
#contact-list {
    margin: 30px 0px;
}
#contact-list li {
    display: block;
    font-size: 15px;
    padding: 8px 0;
}
#contact-list li i {
    font-size: 18px;
    margin-right: 15px;
}
.contact-details h3 {
    font-size: 16px;
    text-transform: uppercase;
}
.contact-social .social li a {
    color: #333333;
}

/*>>>------------------------
17.2 Google Map
-------------------------<<<*/
#map-canvas {
    height: 450px;
    width: 60%;
    border-top: 1px solid #e9e9e9;
}

/*>>>------------------------
17.3 Contact Form
------------------------<<<*/
.contact-input .sub-heading {
    margin-bottom: 20px;
}
.contact-input label {
    display: block;
    font-weight: 400;
    height: 100%;
    margin: 12px 0;
    position: relative;
    width: 100%;
}
.contact-input label i {
    padding: 10px;
    position: absolute;
    top: 17px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    color: #9F9F9F;
    cursor: pointer;
}
.contact-input label input[type="text"],
.contact-input label input[type="email"],
.contact-input label textarea {
    border: 1px solid #cccccc;
    padding: 5px 10px 5px 40px;
    width: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    font-family: 'Raleway', sans-serif;
}
.contact-input textarea {
    height: 180px;
    max-width: 100%;
}
.contact-input button.button {
    margin: 15px 0px 0px;
}
.contact-input button.button:hover {
    background: #333333 none repeat scroll 0 0;
    color: #ffffff;
}

/**************======================
18.0 Blog Page
=======================**************/
.blog-item-list {
    margin-bottom: -20px;
    min-height: 100%;
    overflow: hidden;
}
.blog-item {
    margin-bottom: 30px;
}
.blog-item article {
    border: 1px solid #dddddd;
    box-shadow: 0 4px 5px #cccccc;
    height: 100%;
    margin-bottom: 0;
    position: relative;
}
.blog-thumbnail img {
    position: relative;
    -webkit-transition: all 0.4s linear 0s;
    transition: all 0.4s linear 0s;
    width: 100%;
}
.blog-thumbnail:hover img,
.blogpost-too .blog-thumbnail:hover img {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.blog-thumbnail {
    border-width: 0px 0px 5px 0px;
    border-style: solid;
}
.blog-item-content {
    padding: 25px 20px 20px;
    position: relative;
}
.date {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    text-align: center;
    top: -58px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.day {
    padding: 5px 20px;
}
.year {
    background: #333333 none repeat scroll 0 0;
    padding: 5px 20px;
}
.day>span {
    display: block;
}
a.blog-title h2 {
    font-size: 22px;
    line-height: 30px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.meta {
    margin: 10px 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.meta>span {
    font-size: 14px;
    margin-right: 15px;
    color: #777777;
}
.meta>span:last-child {
    margin-right: 0;
}
.meta span i {
    margin-right: 5px;
}
.read-more {
    text-decoration: underline;
}
.read-more i {
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.read-more:hover {
    color: #333333;
    text-decoration: underline;
}
.read-more:hover i {
    padding-left: 5px;
}

/*>>>------------------------
18.1 Pagination
-------------------------<<<*/
.screen-reader-text {
    display: none;
}
.paginate span,
.paginate a {
    border: 1px solid #ddd;
    border-radius: 3px;
    display: inline-block;
    padding: 5px 10px;
}
.paginate span,
.paginate a:hover {
    border: 1px solid #777777;
    color: #fff;
}

/**************======================
19.0 Newsletter Section
=======================**************/
.newsletter-area {
    background-image: url(assets/img/parallax-background-04.jpg);
}
.section-overlay.newsletter-overlay {
    background-color: #FFFFFF;
    opacity: 0.75;
}
.newsletter h3 {
    font-size: 28px;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.newsletter-form>input[type="email"] {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #333333;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
}
.newsletter-form>input[type="email"]:focus {
    border-color: #333333;
    outline-color: none;
    outline: 0px solid;
}
.subscribe {
    border-left: 1px solid #333333;
    border-radius: 0 8px 8px 0;
    color: #ffffff;
    height: 44px;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 100px;
}
.newsletter-form {
    display: inline-block;
    position: relative;
    width: 400px;
}
.subscribe:hover i {
    padding-left: 20px;
}
.subscribe i {
    font-size: 21px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

/**************======================
20.0 Single Blog
=======================**************/
/*>>>------------------------
20.1 Social Share
-------------------------<<<*/
.share-option {
    background: #f5f5f5 none repeat scroll 0 0;
    overflow: hidden;
    padding: 20px 15px;
    width: 100%;
}
.share-option h4 {
    float: left;
    text-transform: uppercase;
}
.social-share {
    float: right;
    text-align: right;
}
.social-share li {
    float: left;
}
.social-share li a {
    display: block;
    font-size: 22px;
    padding: 5px;
}

/*>>>------------------------
20.2 Post Author
-------------------------<<<*/
.post-author {
    background: #f5f5f5 none repeat scroll 0 0;
    margin: 30px 0;
    overflow: hidden;
    padding: 20px 15px;
}
.post-author img {
    border: 2px solid #dddddd;
    border-radius: 50%;
    float: left;
    height: 100px;
    margin: 0 15px 15px 0;
    width: 100px;
}
.author-info h3 {
    margin-top: 10px;
    font-size: 18px;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.author-social .social li a:hover i {
    color: #333333;
}

/*>>>------------------------
20.3 Single Navigation
-------------------------<<<*/
.single-navigation {
    background: #f5f5f5 none repeat scroll 0 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding: 20px 15px;
    width: 100%;
}
.single-prev {
    float: left;
    width: 50%;
}
.single-next {
    float: right;
    text-align: right;
    width: 50%;
}
.single-navigation div a h4 {
    font-size: 16px;
    text-decoration: underline;
    -webkit-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    font-weight: 400;
}
.single-navigation div a:hover h4 {
    color: #333333;
}

/*>>>------------------------
20.4 Related Blog Post
-------------------------<<<*/
.blogpost-too {
    margin: 20px 0 50px;
    overflow: hidden;
}
.blogpost-too h3 {
    border-bottom: 1px solid #dddddd;
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    text-transform: uppercase;
}
.single-blogpost .blogpost-too .blog-item-content h2 {
    font-size: 18px;
    margin: 0;
    line-height: 28px;
}
.blogpost-too .meta span {
    font-size: 13px;
    margin-right: 5px;
}

/*>>>------------------------
20.5 Comments
-------------------------<<<*/
.single-blogpost .blog-thumbnail img {
    opacity: 1;
}
.single-blogpost .date {
    left: 0;
    top: -92px;
}
.single-blogpost .blog-item-content h2 {
    font-size: 26px;
    line-height: 40px;
    margin-top: 0;
    text-transform: uppercase;
}
.meta.single-meta {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 5px;
}
.comment-list .comment {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 15px;
}
.comment-list .comment:last-child {
    border-bottom: 0px solid;
}
.comments-body h3,
.comments-response h3 {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: inline-block;
    font-size: 18px;
    margin: 10px 0 20px;
    padding-bottom: 5px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
.author-avatar {
    float: left;
    height: 80px;
    width: 80px;
}
.author-avatar>img {
    border: 2px solid #dddddd;
    border-radius: 50%;
}
.name {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 10px;
    font-weight: 400;
}
.date-time {
    font-size: 13px;
}
.comment-details p {
    font-size: 14px;
    line-height: 22px;
    margin: 5px 0;
}
.btn.reply {
    border: 0 solid;
    font-size: 13px;
    padding: 0;
    text-transform: uppercase;
}
.btn.reply:hover {
    color: #333333;
}
.clild-comments {
    margin-top: 15px;
    padding-left: 80px;
}

/*>>>------------------------
20.6 Comments Form
-------------------------<<<*/
.comments-response {
    margin: 20px 0 20px -15px;
    overflow: hidden;
}
.comments-response input[type="text"],
.comments-response input[type="email"],
.comments-response input[type="url"],
.comments-response textarea {
    border: 1px solid #cccccc;
    margin-bottom: 15px;
    padding: 5px 10px;
    width: 100%;
}
.comments-response textarea {
    height: 180px;
    max-width: 100%;
}
.comments-response button {
    margin: 0px;
}
.comments-response button.button:hover,
.comments-response button.button:focus {
    background: #333333 none repeat scroll 0 0;
    color: #ffffff;
}

/**************======================
21.0 404 Page
=======================**************/
.not-found-content h2 {
    font-size: 70px;
}
.not-found-content h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.not-found-content h3 span {
    font-size: 38px;
    font-weight: 700;
    margin-right: 10px;
}
.not-found-content a:hover {
    color: #333333;
}