/*
Template: Maxim - Creative Portfolio HTML5 Template
Author: Xqode
Author URI: https://themeforest.net/user/xqode
Description: Creative Portfolio HTML5 Template
Version: 1.0
*/
/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Welcome Hero Section
8. About us
9. Service
10. Fun facts
11. Testimonial
12. Blog

Main Style file-> assets/css/style.css
*/


.page-banner-wrap {
    min-height: 420px;
    background: #e1e5ff;
  }
  
  .page-banner ul li a, .page-banner ul li {
    display: inline-block;
    color: #333;
    position: relative;
    text-transform: capitalize;
  }
  
  .page-banner ul li::before {
    position: absolute;
    width: 2px;
    height: 20px;
    right: 0;
    content: "";
    top: 50%;
    background: #777;
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
    margin-top: -10px;
  }
  
  .page-banner ul {
    margin-top: 15px;
  }
  
  .page-banner ul li {
    padding-right: 10px;
  }
  
  .page-banner ul li:last-child {
    padding-left: 5px;
  }
  
  .page-banner ul li:last-child::before {
    display: none;
  }
  
  .page-banner h2 {
    font-size: 40px;
    font-weight: 700;
    color: #212121;
    line-height: 1;
    margin: 0;
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  
  .featured-thubnail {
    margin-bottom: 60px;
  }
  
  .post-meta {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #333333;
  }
  
  .post-meta strong {
    font-weight: 700;
    padding-right: 5px;
  }
  
  .single-blog-details p {
    color: #333333;
    font-weight: 400;
  }
  
  @media (max-width: 767px) {
    h1 {
      font-size: 32px;
    }
  }
  
  .single-blog-details blockquote {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    font-style: italic;
    margin-top: 20px;
    padding-left: 20px;
    border-left: 3px solid #333;
  }
  
  .single-blog-details blockquote span {
    display: block;
    font-style: normal;
    font-weight: 400;
  }
  
  .post-tags-cate-section a {
    color: #333333;
  }
  
  .featured-thubnail {
    margin-bottom: 60px;
  }
  
  .post-meta {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
    color: #333333;
  }
  
  .post-meta strong {
    font-weight: 700;
    padding-right: 5px;
  }
  
  .single-blog-details blockquote {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    font-style: italic;
  }
  
  .single-blog-details blockquote span {
    display: block;
    font-style: normal;
    font-weight: 400;
  }
  
  .post-tags-cate-section a {
    color: #333333;
  }
  
  .author-bio-section {
    margin: 60px 0px;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    padding: 45px 0px;
  }
  
  .author-bio-section img {
    float: left;
    margin-right: 30px;
  }
  
  .author-bio-section h4 a {
    font-size: 18px;
    color: #3B3B3B;
    margin: 0;
    line-height: 1;
    font-weight: 700;
  }
  
  .author-bio-section h4 {
    margin: 0;
  }
  
  .related-blog-posts-section h1 {
    line-height: 1;
    margin-bottom: 24px;
    font-size: 36px;
    margin-top: -5px;
  }
  
  .comment-template-section {
    margin: 30px 0px;
  }
  
  .single-comment img {
    float: left;
    margin-right: 30px;
  }
  
  .commentor-info h5 {
    margin: 0;
    display: inline-block;
    color: #3B3B3B;
  }
  
  .commentor-info span {
    font-weight: 300;
    font-size: 12px;
    margin-left: 8px;
    color: #333333;
  }
  
  .comment-text p {
    color: #333333;
    margin: 0;
  }
  
  .btn-replay {
    color: #3B3B3B;
    display: inline-block;
  }
  
  .comment-text {
    overflow: hidden;
  }
  
  .single-comment {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
  }
  
  .single-comment.replay {
    margin-left: 70px;
  }
  
  form .radio-checked input {
    width: 15px !important;
    height: 15px !important;
    margin: 0;
    display: inline-block;
  }
  
  form .radio-checked span {
    font-size: 18px;
    line-height: 1;
    color: #333333;
    font-weight: 300;
    padding-left: 5px;
  }
  
  .comment-template-section h3 {
    margin-bottom: 30px;
    margin-top: -5px;
  }
  
  .contact-submit-btn:hover {
    background: rgba(77, 99, 221, 0.9);
  }
  
  .btn-replay:hover,
  .post-tags-cate-section a:hover {
    color: #4d63dd;
  }
  
  .post-tags-cate-section span {
    font-weight: 500;
    color: #3B3B3B;
    margin-right: 5px;
  }
  
  .post-tags-cate-section a {
    position: relative;
    padding-right: 12px;
  }
  
  .post-tags-cate-section a::before {
    position: absolute;
    width: 10px;
    height: auto;
    content: ",";
    right: 0;
    bottom: -5px;
  }
  
  .post-tags-cate-section a:last-child::before {
    display: none;
  }
  
  .search-form input {
    border: none;
    border-bottom: 1px solid #E1E1E1;
    color: #333333;
    position: relative;
    width: 100%;
    font-size: 16px;
    padding-left: 10px;
  }
  
  .search-form button {
    position: absolute;
    right: 0;
    background: transparent;
    color: #999999;
  }
  
  .search-form input::-webkit-input-placeholder {
    color: #C5C5C5;
  }
  
  .search-form input:-ms-input-placeholder {
    color: #C5C5C5;
  }
  
  .search-form input::-ms-input-placeholder {
    color: #C5C5C5;
  }
  
  .search-form input::placeholder {
    color: #C5C5C5;
  }
  
  .search-form button:hover {
    color: #333;
  }
  
  .single-sidebar-widgets {
    margin-bottom: 60px;
  }
  
  .single-sidebar-widgets h3 {
    margin-top: -8px;
    text-transform: capitalize;
    color: #3B3B3B;
    font-weight: 900;
    font-size: 24px;
    margin-bottom: 26px;
  }
  
  .single-sidebar-widgets a {
	color: #222;
	font-size: 20px;
	font-weight: 400;
	display: block;
	line-height: 34px;
}
  
  .single-populer-post span {
    font-size: 14px;
    line-height: 1;
  }
  
  .single-sidebar-widgets.recent-post h3 {
    margin-bottom: 20px !important;
  }
  
  .single-populer-post {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .single-sidebar-widgets a:hover {
    color: #4d63dd;
  }
  
  .single-populer-post:last-child {
    border: none;
    margin-bottom: 0px;
  }
  
  .single-populer-post p {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  
  .tags-cloud a {
    font-size: 16px;
    display: inline-block;
    color: #333333;
    margin-right: 18px;
    line-height: 26px;
  }
  
  .single-sidebar-widgets .social-links a:hover {
    color: #fff;
    background: #4d63dd;
  }
  
  .single-sidebar-widgets .social-links a {
    display: inline-block;
    font-size: 16px;
    background: #fff;
    line-height: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 30px;
    -webkit-transition: .4s;
    transition: .4s;
    margin-right: 10px;
    -webkit-box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.06);
            box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.06);
  }
  
  .single-sidebar-widgets .social-links {
    margin-top: 0px;
  }
  
  .single-sidebar-widgets:last-child {
    margin-bottom: 0px;
  }
  
  .blog-page-nav ul li, .blog-pages-link ul li {
    display: inline-block;
    margin-right: 15px;
  }
  
  .blog-page-nav ul li a, .blog-pages-link ul li a {
    border-style: solid;
    border-width: 1px;
    border-color: #FF6073;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    display: inline-block;
    line-height: 47px;
    text-align: center;
    color: #FF6073;
    background: #fff;
  }
  
  .blog-page-nav ul li a:hover, .blog-pages-link ul li a:hover {
    background: #FF6073;
    color: #fff;
  }
  
  .contact-form-wraper {
    margin-top: 60px;
  }
  
  .contact-form-wraper h1 {
    font-size: 60px;
    line-height: 1;
    margin-bottom: 50px;
  }
  
  .contact-form-wraper form input, .contact-form-wraper form textarea {
    width: 100%;
    height: 71px;
    background: #fff;
    box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: 0px 6px 26px rgba(0, 0, 0, 0.06);
    border: none;
    padding-left: 30px;
    text-transform: capitalize;
    margin-bottom: 29px;
    color: #333333;
  }
  
  .contact-form-wraper form textarea {
    height: 300px;
    padding-top: 30px;
  }
  
  button.contact-submit-btn {
    height: 55px;
    background: #4d63dd;
    color: #fff;
    text-transform: capitalize;
    -webkit-transition: .5s;
    transition: .5s;
    margin-left: 15px;
    display: inline-block;
    padding: 0px 45px;
    margin-top: 30px;
    font-weight: 500;
    border-radius: 5px;
  }
  
  button.contact-submit-btn:hover {
    background-color: #4d63dd;
  }