/*
Theme Name: rafo
Theme URI: http://tfrafo.themepul.com/
Author: Themepul
Author URI: http://themepul.com
Description: Thinking about Showcasing your Digital Agency & Consultancy Business? Well, then you definitely be needing a nice and beautiful WordPress Theme to promote your Business. We’ve got you covered as we have already built a beautiful, Clean and Responsive WordPress Theme for you.rafo is a Digital Agency & Consulting WordPress Theme designed and developed using Latest Bootstrap and WordPress Technology along with HTML5, CSS3, and jQuery. It's simple yet professional. rafo is also responsive Design with a Clean Design feel. It looks good and accommodates its contents according to the device you are using to view it.rafo has sections for almost all types of necessary content you might need to promote your Business.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, left-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready
Text Domain: rafo
*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Transition
# Header 
# Hamburger Icon 
# Icon 
# hide menu state checkbox 
# hide the menu in mobile view
# blog 
# Widgets
# Comments box
# Comment list 
# Contact Form
# Error Page 
# Footer  
# Bottom To Top  
--------------------------------------------------------------*/


/* Transition */

.rafo-btns > a,
.rafo-btns > a:hover>span,
.rafo-btns > a:hover,
.rafo-ftw-box ul li a:hover,
.rafo-ftw-box ul li a,
a,
a:hover,
.rafo-bread-content:hover h1 span:after,
.rafo-bread-content h1 span:after,
.post-navigation .nav-links a:hover span.post-title,
.post-navigation span.post-title,
.post-single:hover,
.post-single,
.rafo-blog-red a:hover,
.rafo-blog-red a,
.rafo-blog-red a:hover:after,
.rafo-blog-red a:after,
.site-header,
#header-stikcy,
nav.navigation.post-navigation .nav-links a h3:hover,
.search-button button:hover,
.search-button button:hover:focus,
.search-button button,
.search-button button:focus,
.post-password-required input[type=submit],
.post-password-required input[type=submit]:hover {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

p {
    color: #798795;
}

.mb-30 {
    margin-bottom: 30px
}


/*** buttons ***/

.rafo-btns span:after {
    content: "+";
}

.rafo-btns span {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #000000;
    border-radius: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 13px;
    font-size: 24px;
    color: #fff;
    margin-right: 11px;
    margin-top: -5px;
}

.rafo-btns > a {
    font-size: 18px;
    color: #000;
    font-weight: bold;
}

.rafo-btns > a:hover>span {
    background-color: #ee324a;
}

.rafo-btns > a:hover {
    color: #ee324a
}


/** Header Section ***/

.rafo-container {
    width: 78%;
    margin: 0 auto;
}

header.site-header {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    padding: 20px 0;
}

.rafo-hero.on .site-header {
    position: fixed;
    background: #202328;
    z-index: 99999;
    box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.36);
}

ul#main-menu > li > a {
    padding: 20px 15px;
    color: #fff;
}

.rafo-header .navbar {
    padding: 0px;
}

ul#main-menu li ul a:hover {
    color: #fff;
}

ul#main-menu li ul a {
    color: #fff;
}

.admin-bar .rafo-hero.on .site-header {
    padding-top: 50px;
}

.rafo-header .navbar-brand,
.rafo-logo-text {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
}

h1.default-logo a {
    font-size: 21px;
}

p.site-description {
    padding: 0;
    color: #fff;
}

h1.default-logo {
    margin: 0;
}

.rafo-logo-default {
    margin-top: -10px;
}

.main-menu-btn {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-indent: 28px;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rafo-nmenu ul li ul.sub-menu {
    padding: 15px 0
}

#navmenu ul li ul ul ul ul ul ul ul.sub-menu {
    margin-top: 0 !important;
}


/* hamburger icon */

.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
    position: absolute;
    top: 50%;
    left: 2px;
    height: 2px;
    width: 24px;
    background: #ffffff;
    -webkit-transition: all 0.25s;
    transition: all 0.25s;
}

.main-menu-btn-icon:before {
    content: '';
    top: -7px;
    left: 0;
}

.main-menu-btn-icon:after {
    content: '';
    top: 7px;
    left: 0;
}


/* x icon */

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
    height: 0;
    background: transparent;
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
    top: 0;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
    top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/* hide menu state checkbox */

#main-menu-state {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}


/* hide the menu in mobile view */

#main-menu-state:not(:checked) ~ #main-menu {
    display: none;
}

#main-menu-state:checked ~ #main-menu {
    display: block;
}

@media (min-width: 768px) {
    .main-menu-btn {
        position: absolute;
        top: -99999px;
    }
    #main-menu-state:not(:checked) ~ #main-menu {
        display: block;
    }
}


/*** Blog section ***/

.post-single {
    margin-bottom: 45px;
}

.post-single .blog-article {
    overflow: hidden;
    padding: 30px;
    background-color: #fff;
}

.rafo-post-meta > span {
    margin-right: 8px;
}

.rafo-post-meta > span:before {
    margin-right: 6px;
}

.rafo-post-meta {
    margin-bottom: 10px;
}

h2.post-title {
    font-size: 28px;
    line-height: 34px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.post-single:hover {
    box-shadow: 0px 0px 14px 1px rgba(195, 195, 195, 0.43);
}

.single-post .post-single:hover {
    box-shadow: none;
}

span.cat-links:before {
    content: "\f02b";
    font-family: fontawesome;
    font-size: 10px;
    font-weight: 300;
    position: relative;
    top: -1px;
    color: #000000;
}

span.posted-on:before {
    content: "\f073";
    font-family: fontawesome;
    font-size: 12px;
    font-weight: 300;
    position: relative;
    top: -1px;
    color: #000000;
}

span.byline:before {
    content: "\f007";
    font-family: fontawesome;
    font-size: 12px;
    color: #000;
    position: relative;
    top: -1px;
    color: #000000;
    margin-right: 0;
}

.sticky .blog-article {
    background-color: rgba(199, 199, 199, 0.2);
}

.rafo-blog-box .post-single.sticky:hover {
    box-shadow: none;
}

.rafo-blog-box .post-single.sticky {
    box-shadow: none;
}

.rafo-blog-red a {
    font-weight: bold;
}

.rafo-blog-red a:after {
    content: "\f105";
    font-family: fontawesome;
    margin-left: 5px;
}

.rafo-blog-red a:hover:after {
    margin-left: 10px;
    content: "\f101";
}

.rafo-blog-box .post-single.sticky .post-title a {
    color: #ee324a;
}

.post-single.format-link {
    position: relative;
    overflow: hidden;
}

.post-summery.entry-content {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.post-single.format-link:before {
    content: "\f0c1";
    position: absolute;
    right: 0;
    font-family: fontawesome;
    font-size: 123px;
    height: 100%;
    top: 49px;
    color: rgba(236, 236, 236, 0.58);
}

.single-post .post-single.format-link .post-summery.entry-content {
    text-align: center;
    padding: 38px;
    padding-bottom: 20px;
}

.single-post .post-single.format-link .post-summery.entry-content a {
    color: #ee324a;
    font-size: 19px;
}

.single-post .post-single.format-link .post-summery.entry-content a:hover {
    color: #000;
}

.post-password-required input[type=password] {
    padding: 15px;
    border-color: #e6e6e6;
}

.post-password-required input[type=submit] {
    padding: 15px 25px;
    margin-left: -5px;
    border: 1px solid transparent;
    background-color: #ee324a;
    color: #fff;
    cursor: pointer;
}

.post-password-required input[type=password]:focus {
    border-color: red;
}

.post-password-required input[type=submit]:hover {
    background-color: #212529;
}


/*** post tag ***/

.rafo-blog-rag-meta {
    margin-top: 15px;
}

.tagcloud a {
    font-size: 12px !important;
    padding: 1px 14px;
    background: #e2e2e2;
    display: inline-block;
    margin: 4px 3px;
    color: #4c4c4c;
    text-transform: capitalize;
    border-radius: 21px;
}

.tagcloud a:hover {
    background-color: #ee324a;
    color: #fff;
}

.entry-f-left {
    flex-grow: 1;
}


/*** sidebar widget **/

.rafo-sidebar .widget:last-child {
    margin-bottom: 0;
}


/*** comments Box ***/

.comments-area .comment-area .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rafo-comment-filed {
    margin-bottom: 30px;
}

.rafo-comment-filed input,
.rafo-comment-filed textarea {
    background: #f7f7f7;
    border-radius: 0;
}

.rafo-comment-filed input:focus,
.rafo-comment-filed textarea:focus {
    outline: #ee324a;
    background-color: #f7f7f7;
    border: 1px solid #ee324a;
    box-shadow: none;
}

.rafo-cm-btns button[type="submit"] {
    width: 100%;
    border-radius: 0;
    padding: 15px 0;
    text-transform: capitalize;
    background-color: #000;
    color: #fff;
    border-color: transparent;
    font-family: Oswald;
    font-size: 15px;
    text-transform: uppercase;
}

.rafo-cm-btns {
    margin-bottom: -30px;
}

.rafo-cm-btns button[type="submit"]:hover {
    background-color: #ee324a;
}

.rafo-cm-btns button[type="submit"]:focus {
    border: 1px solid transparent;
    box-shadow: none;
}

p.comment-form-cookies-consent {
    text-align: left;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    top: 0;
}

p.comment-form-cookies-consent > input[type="checkbox"] {
    width: auto;
    margin-right: 10px;
    position: relative;
    top: 2px;
}

p.comment-form-cookies-consent > label {
    cursor: pointer;
}


/*** Comment list ***/

.comment-reply a {
    margin: 15px;
}

.comment-img {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: relative;
    display: inline-block;
    overflow: hidden;
    float: left;
    clear: both;
    margin-right: 16px;
    margin-left: -43px;
}

.comment-img img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    float: left;
    border: 1px solid rgba(234, 234, 234, 0.64);
}

.comment-content em {
    color: #000;
    margin: 10px 0;
}

.comment-content {
    display: block;
    overflow: hidden;
}

.comment-area ul.childrn ol {
    margin-left: 50px;
}

.comment-area ul.children ul.children ol {
    padding-left: 51px;
}

.comment-area ul.children ul.children ul.children ul.children ol {
    margin-left: 51px;
}

.comment-body {
    border: 1px solid #e4e4e4;
    padding: 30px 30px;
    background: transparent;
    border-radius: 10px;
    padding-left: 0;
    padding-bottom: 19px;
}

.blog-details-reply-box {
    display: block;
    margin-top: 15px;
}

.comment-time {
    display: inline-block;
    margin-right: 0;
    color: hsla(0, 0%, 0%, 0.57);
    text-transform: capitalize;
    font-size: 13px;
}

.comment-reply {
    display: inline-block;
}

h3#reply-title small a {
    font-size: 16px;
    color: #000;
}

.comment-form p.logged-in-as a {
    color: #000;
}

.comment-form p.logged-in-as a:hover {
    color: #ee324a;
}

.comment-reply a {
    margin: 4px;
    text-transform: capitalize;
}

h3.comment-title {
    font-size: 15px;
    text-transform: capitalize;
    font-weight: bold;
    color: #000;
}

.comment-list li.comment.single-comment .comment-respond {
    padding-top: 30px;
    width: 100%;
    clear: both;
    overflow: hidden;
}

.comment-time:before {
    content: "\f017";
    font-family: fontawesome;
    margin-right: 5px;
}

a.Repost:before {
    content: "\f112";
    font-family: fontawesome;
    margin: 6px;
}

a.reply:before {
    content: "\f122";
    font-family: fontawesome;
    margin: 5px;
}

.comment-reply a:hover {
    color: #ee324a;
}

.comment-reply a {
    color: rgb(0, 0, 0);
    font-size: 12px;
}

.comment-area > h2 {
    font-size: 18px;
    font-weight: bold;
    text-transform: capitalize;
}

.comment-respond > h2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    display: block;
    padding-bottom: 13px;
    text-decoration: underline;
}

.comment-respond a.btn.btn-buttons {
    padding: 10px;
    color: #fff;
    text-transform: capitalize;
    border-radius: 5px;
    margin-top: 20px;
}

li.single-comment {
    margin: 30px 0px 30px 44px;
}

ol.comment-list-reply {
    margin-left: 14px;
}

.respons-box label {
    color: #fff;
    font-weight: normal;
}

.rafo-post-commnet p.no-comments {
    padding: 19px 0;
    font-weight: bold;
    color: #000;
}

.comment-area ol.comment.odd {
    margin-left: 60px;
}

.comment-area ul.children li {
    padding: 0;
}

a.comment-reply-link:before {
    content: "\f112";
    font-family: fontawesome;
    margin-right: 6px;
}

a.comment-reply-link {
    margin: 10px;
}

h3.comment-title > label {
    margin-left: 12px;
    font-size: 85%;
    font-family: Open sans;
    font-weight: normal;
    color: #ee324a;
}

h3.comment-title > label span {
    margin-right: 5px;
}

.comment-reply a > span {
    margin-right: 5px;
}

h2.post-title > blockquote > a:hover {
    color: #ee324a
}

h2.post-title > blockquote > a {
    color: #000;
}

.single-post .post-single.format-quote blockquote {
    margin: 20px 0;
}


/*** contact form ***/

.rafo-comment-filed .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
}

input.wpcf7-form-control.wpcf7-submit {
    padding: 15px 45px;
    font-weight: 600;
    font-family: Oswald;
    font-size: 18px;
    background: #ee324a;
    color: #fff;
    cursor: pointer;
}

input.wpcf7-form-control.wpcf7-submit:hover {
    background: #000000;
}

.wpcf7 form > label {
    display: block;
    width: 100%;
}

.wpcf7 form > label > span > input,
.wpcf7 form > label > span > textarea {
    width: 100%;
    background-color: #f7f7f7;
    border: 1px solid transparent;
    margin: 11px 0;
}

.wpcf7 form > label > span > input:focus,
.wpcf7 form > label > span > textarea:focus {
    border-color: #ee324a;
}

p.wp-block-cover-text strong {
    color: #ffffff;
}

.rafo-single-post-page p {
    margin-bottom: 20px;
}

.rafo-blog-red {
    margin-top: 15px;
}

.format-chat .entry-content p {
    padding: 15px;
    margin-right: 20px;
    background: #f5f5f5;
    border-radius: 5px;
}

.format-chat .entry-content p:nth-child(2n) {
    margin-right: 0;
    margin-left: 24px;
    text-align: right;
}

nav.navigation.posts-navigation .nav-links {
    background: #ffffff;
    padding: 20px;
    box-shadow: 0px 0px 8px 1px #e8e8e8;
}

nav.navigation.posts-navigation .nav-links > div > a {
    text-transform: uppercase;
    font-family: Oswald;
    padding-bottom: 0;
    padding-top: 5px;
}

nav.navigation.posts-navigation .nav-links .nav-next a,
nav.navigation.posts-navigation .nav-links .nav-previous a {
    position: relative;
}

nav.navigation.posts-navigation .nav-links .nav-next a:after {
    content: "\f101";
    font-family: fontawesome;
    margin-left: 5px;
    font-weight: 200;
}

nav.navigation.posts-navigation .nav-links .nav-previous a:before {
    content: "\f100";
    font-family: fontawesome;
    margin-right: 5px;
}


/*** Error page ***/

.rafo-error-img {
    text-align: center;
}

.rafo-error-img h1 {
    font-size: 166px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    font-family: Open Sans;
    color: #000000;
    display: block;
    clear: both;
    overflow: hidden;
    margin-bottom: -37px;
    margin-top: -43px;
}

.rafo-error-home {
    margin-left: -13px;
    margin-top: 39px;
    padding-bottom: 0;
}

.rafo-error-home a.rafo-pro-btn {
    margin-left: 33px;
}

.error-search {
    position: relative;
    margin-top: 27px;
}

.error-search input[type="search"] {
    width: 100%;
    border: 2px solid red;
    border-radius: 31px;
    padding: 16px 29px;
}

.error-search .search-button button {
    background: #ee324a;
    padding: 18px 33px;
    margin-right: -2px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    font-size: 14px;
    color: #fff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

.error-search .search-button button:hover {
    background-color: #000000;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out
}

.rafo-error-imgs {
    width: 92%;
}

.rafo-error-page {
    padding: 80px 0;
}

.error-content {
    display: table;
    height: 100%;
}

.error-content-table {
    display: table-cell;
    vertical-align: middle;
}

nav.navigation.pagination .nav-links ul {
    padding: 0;
    margin-bottom: 0;
}


/* Footer */

footer.site-footer {
    padding-top: 120px;
}

.page-template-blank-template footer.site-footer,
.page-template-fullwidth-template footer.site-footer,
.single-project footer.site-footer {
    padding-top: 0;
}

.widget.rafo-ft-content ul {
    list-style: none;
    padding: 0;
}

footer .rafo-footer-widgets {
    background-color: #222222;
    padding: 100px 0;
    padding-bottom: 50px;
}

footer.site-footer .widget {
    margin-bottom: 50px;
}

footer.site-footer .widget:last-child {
    margin-bottom: 0;
}

.rafo-ftw-box .accordion span.down-up {
    color: #ffffff
}

.rafo-ft-menu ul li ul li a {
    color: #fff !important;
}

.rafo-ftw-box h2 {
    color: #ffffff;
    font-size: 18px;
}

.rafo-ftw-box ul li a {
    color: #ffffff;
    padding: 0;
}

.rafo-ftw-box .rafo-ft-content > ul li a:hover {
    color: #ee324a;
}

.rafo-ft-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rafo-copyright p {
    margin: 0;
    color: #fff;
    padding: 7px 0;
}

.rafo-copyright {
    flex-grow: 1;
}

.rafo-footer-bottom {
    padding: 30px 0 21px 0;
    background-color: #0f0f0f;
}

.rafo-ftw-box .widget_text .sbHolder ul li a {
    color: #000;
}

.rafo-copyright p a {
    color: #ee324a;
}

.rafo-copyright p a:hover {
    color: #fff;
}

.rafo-ft-menu #footermenu > ul > li > a:hover {
    color: #ee324a;
}

.rafo-ft-menu ul li a {
    margin-left: 0;
    color: #fff;
    text-transform: capitalize;
    font-size: 14px;
    margin-right: 0;
    width: 100%;
    padding-right: 20px !important;
}

.rafo-ft-content ul > li.menu-item > a:hover {
    color: #ee324a;
}

.rafo-breadcroumb-inner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
    background-color: #000000;
    margin-bottom: 180px;
    position: relative;
}

.rafo-bread-content {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    left: 0;
    background-color: rgba(16, 16, 16, 0.98);
    width: 100%;
    height: 100%;
    clear: both;
    padding: 132px 100px;
    position: relative;
}

.rafo-breadcroumb-inner:after {
    z-index: -1;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

.rafo-bread-content h1 {
    color: #fff;
    margin: 0;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.rafo-bread-content h1 > span {
    position: relative;
    z-index: 1;
    padding: 30px 0;
}

.rafo-bread-content h1 > span:after {
    content: "";
    width: 70px;
    height: 100%;
    background: #ee324a;
    position: absolute;
    left: -29px;
    z-index: -1;
    top: 0;
}

.rafo-bread-content:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.rafo-bread-content:hover h1 span:after {
    width: 50%;
}

.rafo-breadcroumb-inner .container-fluid {
    width: 92%;
    height: 100%;
    padding-top: 40px;
    position: relative;
    top: 60px;
}

.rafo-bread-content h1 > span b {
    color: #fff;
}


/* Bottom to top **/

.to-top {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 50px;
    background: #ee324a;
    bottom: 20px;
    text-align: center;
    color: #fff;
    border-radius: 100%;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
}

a.rafo-pro-btn {
    min-width: 65px;
    background: black;
    display: inline-block;
    padding: 16px 33px;
    font-weight: bold;
    font-size: 16px;
    font-family: Oswald;
    color: #fff;
    border-bottom: 3px solid #ee324a;
}

a.rafo-pro-btn span {
    margin-left: 13px;
    position: relative;
    top: 2px;
    font-weight: normal;
    color: #ee324a;
}

a.rafo-pro-btn:hover {
    background-color: #ee324a;
    border-bottom: 3px solid #000;
    color: #ffffff;
}

a.rafo-pro-btn:hover span {
    color: #fff;
}

.rafo-project-btn {
    text-align: center;
    margin-top: 40px;
}

a.rafo-pro-btn:focus,
a.rafo-pro-btn:hover:focus {
    border-bottom: 3px solid #000;
}

.rafo-project-btn {
    text-align: center;
    margin-top: 32px;
}