/*
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.0.0
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
*/


/* 1. Theme default css */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Rubik:300,400,500,700,900');
 body {
	font-family: 'Rubik', sans-serif;
	font-weight: normal;
	font-style: normal;
	background: #ebecf1;
}
.img {
	max-width: 100%;
	transition: all 0.3s ease-out 0s;
}
.f-left {
	float: left
}
.f-right {
	float: right
}
.fix {
	overflow: hidden
}
a,
.button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}
a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}
a:focus,
a:hover,
.portfolio-cat a:hover,
.footer -menu li a:hover {
	color: #1b70f0;
	text-decoration: none;
}
a,
button {
	color: #1696e7;
	outline: medium none;
}
.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Poppins', sans-serif;
	font-weight: normal;
	color: #062a4d;
	margin-top: 0px;
	font-style: normal;
	font-weight: 400;
	text-transform: normal;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}
h1 {
	font-size: 40px;
	font-weight: 500;
}
h2 {
	font-size: 35px;
}
h3 {
	font-size: 28px;
}
h4 {
	font-size: 22px;
}
h5 {
	font-size: 18px;
}
h6 {
	font-size: 16px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	list-style: none
}
p {
	font-size: 16px;
	font-weight: normal;
	line-height: 28px;
	color: #758799;
	margin-bottom: 15px;
}
hr {
  border-bottom: 1px solid #eceff8;
  border-top: 0 none;
  margin: 0;
  padding: 0;
}
label {
	color: #7e7e7e;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
}
*::-moz-selection {
	background: #d6b161;
	color: #fff;
	text-shadow: none;
}
::-moz-selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
::selection {
	background: #444;
	color: #fff;
	text-shadow: none;
}
*::-moz-placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
*::placeholder {
	color: #555555;
	font-size: 14px;
	opacity: 1;
}
.theme-overlay {
	position: relative
}
.theme-overlay::before {
	background: #1696e7 none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%;
}
.separator {
	border-top: 1px solid #f2f2f2
}
/* button style */

.btn {
	-moz-user-select: none;
	background: #1696e7 none repeat scroll 0 0;
	border: medium none;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1;
	margin-bottom: 0;
	padding: 13px 25px;
	text-align: center;
	text-transform: uppercase;
	touch-action: manipulation;
	transition: all 0.3s ease 0s;
	vertical-align: middle;
	white-space: nowrap;
}
.btn.btn-black {
	background: #303b41;
}
.btn.btn-black:hover {
	background: #1a1a1a;
}
.btn:hover {
	background: #106fab;
	color: #fff
}
.btn.btn-large {
	padding: 10px 25px;
}
.btn-lg {
	font-weight: 700;
	padding: 13px 31px;
}
.btn.white-btn:hover {
	border-color: #ddd;
	color: #ddd
}
.btn.btn-base.btn-link {
	background: transparent none repeat scroll 0 0;
	border: 0 none;
	color: #1696e7;
	padding: 0;
	text-decoration: none;
}
.btn.btn-base.btn-link:hover {
	color: #106fab;
}
.theme-bg {
	background: #1696e7
}
.bg-white {
	background-color: #ffffff;
}
.breadcrumb > .active {
	color: #888;
}
.owl-carousel .owl-nav div {
	background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
	height: 40px;
	left: 20px;
	line-height: 40px;
	opacity: 0;
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	transition: all 0.3s ease 0s;
	visibility: hidden;
	width: 40px;
}
.owl-carousel .owl-nav div.owl-next {
	left: auto;
	right: 20px;
}
.owl-carousel:hover .owl-nav div {
	opacity: 1;
	visibility: visible;
}
.owl-carousel .owl-nav div:hover {
	background: #2B96CC;
	color: #fff
}



/* header */
.logo {
	margin-top: 13px;
}
.header-area {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 99;
	padding: 20px 0;
}
.purchase-link {
	margin-top: 4px;
}
.purchase-link a {
	display: inline-block;
	font-weight: 500;
	text-align: center;
	border: 1px solid transparent;
	line-height: 1;
	border-radius: 0;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background: #1b70f0b3;
	padding: 23px 25px;
	text-transform: uppercase;
	font-size: 15px;
	color: #fff;
	height: 60px;
}
.purchase-link a:hover{background: #1b70f0;color: #ffffff;}


/* intro */
.page-title-area {
    padding-top: 265px;
    padding-bottom: 260px;
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: -1;
}

.intro-wrapper h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
}
.title-area {
    padding: 150px 0;
}
.intro-wrapper h2 {
	font-size: 60px;
	font-weight: 600;
	letter-spacing: -1px;
	margin-bottom: 20px;
	color: #fff;
	line-height: 1.5;
	padding: 0;
}
.intro-wrapper p {
  margin: 0;
}
.ready-wrapper > h4 {
	font-size: 45px;
	font-weight: 600;
	margin-bottom: 20px;
	letter-spacing: -1px;
	position: relative;
}
.ready-wrapper > p {
	margin: 0;
}
.intro-wrapper p {
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.6;
}

/* demo */
.demo-area {
	padding-left: 100px;
	padding-right: 100px;
}
.demo-wrapper {
	margin-bottom: 60px;
}
.demo-thumb {
	box-shadow: 0 2px 40px rgba(0,0,0,.08);
	transition: .3s;
	position: relative;
}
.demo-thumb:hover {
	box-shadow: 0 30px 65px rgba(0,0,0,.15)
}
.demo-thumb > a {
	display: block;
	overflow: hidden;
	position: relative;
}
.demo-thumb a > img {
    width: 100%;
	transition:.3s;
}
.demo-title > h4 {
	font-size: 18px;
	font-weight: 600;

}
.demo-title > h4 a:hover {
	color: #1b70f0
}
.demo-title {
	padding-top: 35px;
}
.demo-thumb span {
	-webkit-transition: all .5s cubic-bezier(.645,.045,.355,1);
	transition: all .5s cubic-bezier(.645,.045,.355,1);
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
	padding: 25px 30px;
	background: #1b70f0;
	color: #fff;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
}
.demo-thumb:hover span {
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}

/* features */
.bakix-features {
	border-radius: 5px;
	-webkit-box-shadow: 0 2px 40px rgba(0,0,0,.08);
	box-shadow: 0 2px 40px rgba(0,0,0,.08);
	padding: 45px 15px;
	text-align: center;
}
.bakix-features img {
	border-radius: 5px;
	margin-bottom: 15px;
	width: 70px;
}
.bakix-features h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0;
	text-transform: capitalize;
}


/* footer */
.footer-area {
  /* background-image: -moz-linear-gradient( 0deg, rgb(0,122,223) 0%, rgb(0,236,188) 100%);
  background-image: -webkit-linear-gradient( 0deg, rgb(0,122,223) 0%, rgb(0,236,188) 100%);
  background-image: -ms-linear-gradient( 0deg, rgb(0,122,223) 0%, rgb(0,236,188) 100%); */
}
.footer-text h2 {
	color: #fff;
	font-size: 50px;
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 20px;
}
.footer-text h2 i {
	font-family: "Playfair Display", Georgia, serif;
}
.footer-text p {
	color: #fff;
	margin-bottom: 30px;
	font-size: 20px;
}
.footer-text a {
	display: inline-block;
	font-weight: 500;
	text-align: center;
	border: 1px solid transparent;
	line-height: 1;
	border-radius: 0;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background: #fff;
	padding: 23px 40px;
	text-transform: uppercase;
	font-size: 12px;
	color: #333;
	height: 60px;
	letter-spacing: 2px;
}
.footer-text a:hover{
	background: #1b70f0;
	color: #ffffff;
}



/*--- end of custom attributes ---*/
/*--- preloader ---*/
.dark #preloader {
  background-color: #232323;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: 999999;
}

.preloader {
  width: 50px;
  height: 50px;
  display: inline-block;
  padding: 0px;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #fb4f53;
  -webkit-animation: preloader 1.3s linear infinite;
  animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}

@keyframes preloader {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@-webkit-keyframes preloader {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0;
  }
}

/*--- end of preloader ---*/

.intro-wrapper.text-center h3 {
    font-size: 38px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 22px;
}
.ready-wrapper > h4 > span {
    position: absolute;
    background: #0a5be0;
    top: -18px;
    color: #fff;
    font-size: 18px;
    padding: 9px 12px;
    font-weight: normal;
    border-radius: 5px;
}
.demo-thumb strong {
    position: absolute;
    top: 0;
    left: 0;
    background: #dc3545;
    padding: 19px 24px;
    border-radius: 0px 0px 76px 3px;
    color: #fff;
    font-size: 15px;
    text-align: center;
}