/*
Theme Name: AppRaxx - 5 in 1 App Landing Page
Theme URI: http://live.envalab.com/html/appraxx/
Author: ENVALAB TEAM
Author URI: http://envalab.com/
Description: AppRaxx – Creative App Landing Page HTML5 Template is collection of App marketing pages which are perfect suit for showcase your App or services smart and flexible way. It's not only for a mobile Apps but also for mobile games showcase or any application website showcase. It's include stunning, powerful and unique landing page templates which are perfect to promoting Apps or web services & made for iOS and Android Apps makers.
Version: 1.0
*/

/*
====================================================
*	Appraxx DEMO 4 CSS
*	Primary color: #1067b0
*   CSS INDEX
====================================================

		TOC:
		0.  GENRAL
		1.  HEADER
		2.  MENU
		3.  SLIDER
		4.  APP OVERVIEW
		5.  VIDEO
		6.  CUSTOMERS FEEDBACK
		7.  BLOG
		8.  DOWNLOAD
		9.  SUBSCRIBE
		10. FOOTER
		11. BLOG

===================================================================== */


/* ------------------------------------------------------------------ */
/* 0. GENERAL
/* ------------------------------------------------------------------ */

.title-border {
	position: relative;
	display: inline-block;
	margin-bottom: 40px;
}

.title-border:before,
.title-border:after {
	content: '';
	position: absolute;
	height: 1px;
	background-color: #1067b0;
	width: 65%;
}

.title-border:before {
	top: -8px;
	left: -15%;
}

.title-border:after {
	right: -15%;
	bottom: -8px;
}

.gray-border {
	border: 1px solid #e5e5e5;
}

.icofont {
	color: #f4f4f4;
}

.icofont:hover {
	opacity: .95;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
}

.btn-set a {
	max-width: 45%;
}

.btn-set a:first-child {
	margin-right: 25px;
}


/*
|----------------------------------------------------------------------------
		1. HEADER
|----------------------------------------------------------------------------
*/

.main-header nav {
	border: none;
}	

.logo {
	padding-top: 29px;
}

.affix .logo {
	padding-top: 10px;
}

.affix {
	background: -webkit-linear-gradient(left, #ffffff 30%, #1067b0 90%);
	background: linear-gradient(to right, #ffffff 30%, #1067b0 90%);
}


/*
|----------------------------------------------------------------------------
		2. MENU
|----------------------------------------------------------------------------
*/

.nav li a {
	color: #fff;
	padding: 45px 15px;
	position: relative;
}

.menu-border li a:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	border-right: 1px solid #f9677b;
	border-left: 1px solid #f3596f;
	height: 15px;
}

.menu-border li:last-child a:after,
.affix .menu-border li a:after {
	content: none;
}

.affix .nav li a {
	padding: 25px 15px;
}

.nav li a:hover,
.page-blog .affix .nav li.active a,
.nav li a:focus {
	background-color: transparent;
}

.affix .nav li.active a,
.affix .nav li a:hover,
.page-blog .affix .nav li a:hover {
	background-color: #303030;
}

/* SECONDARY MENU */
.secondary-menu-icon,
.secondary-menu-icon:hover {
	padding: 39px 0;
	margin-left: 35px;
	font-size: 20px;
}

.secondary-menu-icon i {
	color: #fff;
}

.affix .secondary-menu-icon {
	padding: 19px 0 15px;
}

.secondary-menu-area {
	position: fixed;
	width: 300px;
	max-width: 70%;
	right: -360px;
	top: 0;
	bottom: 0;
	background-color: #303030;
	z-index: 9999999;
	-webkit-transition: all .4s;
	transition: all .4s;
}

.secondary-menu-open:after {
	content: '';
	background-color: rgba(0,0,0,.7);
	right: 100%;
	top: 0;
	left: -99999px;
	bottom: 0;
	position: absolute;
	z-index: -1;
}

.secondary-menu-open {
	right: 0;
}

.secondary-menu li a {
	color: #fff;
	padding: 17px 30px;
	display: block;
}

.secondary-menu li a:hover,
.secondary-menu li.active a {
	background-color: #1067b0;
}

/* CLOSE ICON */
.secondary-menu-area i {
	color: #fff;
	background-color: #1067b0;
	position: fixed;
	font-size: 30px;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
	cursor: pointer;
	width: 100px;
	height: 100px;
	line-height: 100px;
	border-radius: 50%;
	text-align: center;
	visibility: hidden;
}

.secondary-menu-open i {
	visibility: visible;
}


/* SUB MENU */
.nav li {
	position: relative;
}
.nav li ul {
	position: absolute;
	top: 100%;
	right: 0;
	border-radius: 0 0 4px 4px;
	display: none;
}

.nav li ul ul {
	top: 0;
	left: 100%;
}

.nav li ul li {
	float: none;
	border-top: 1px solid rgba(146, 132, 132, 0.52);
}

.nav ul li a,
.affix .nav ul li a {
	display: block;
	padding: 10px 22px;
	background-color: rgb(156, 9, 29);
	white-space: nowrap;
}

.nav ul li a:hover,
.affix .nav ul li a:hover {
	background-color: #1067b0;
}

.nav li.has-sub-menu:hover > a {
	background-color: #303030;
}

li.has-sub-menu > a:after {
	content: '\eb73';
	font-family: 'icofont';
	position: relative;
	top: 2px;
	left: 2px;
	color: #eee;
}

li.has-sub-menu a + i {
	display: none;
	cursor: pointer;
}

.secondary-menu li ul {
	display: none;
}

.nav li:hover > ul,
.secondary-menu li:hover > ul {
	display: block;
}

.secondary-menu li.has-sub-menu:hover > a {
	background-color: #1067b0;
}

.secondary-menu ul li a {
	padding: 10px 35px;
	padding-left: 45px;
}

/*
|----------------------------------------------------------------------------
		3. SLIDER
|----------------------------------------------------------------------------
*/

/*fix click for particles js*/
.home-slider.owl-carousel, 
.home-slider.owl-carousel * {
	z-index: 10;
}

.slider-item .container,
.slider-item .container .row {
	height: 100%;
}

.slider-item {
	background-color: #e43a52;
	height: 700px;
}

.slide-bg-1 {
	background-image: url('../img/demo-4/slide-bg.jpg');
}
.slide-bg-2 {
	background-image: url('../img/demo-4/slide-bg-1.jpg');
}
.slide-bg-3 {
	background-image: url('../img/demo-4/slide-bg-3.jpg');
}

.banner-image {
	max-width: 88%;
}

.banner-text * {
	color: #1067b0;
}

.banner-text h1 {
	margin-bottom: 45px;
	line-height: 1.2;
}

.banner-text p {
	margin-bottom: 65px;
}

.banner-text .btn {
	position: relative;
	padding-left: 40px;
	font-size: 22px;
}

.banner-text .btn i {
	font-size: 30px;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 32px;
	color: #fff;
	border: none;
	padding: 0;
}

.banner-text .btn:hover,
.banner-text .btn:hover i {
	background-color: #f6f6f6;
	color: #1067b0;
}

.home-slider .owl-dots {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
	right: 40px;
	z-index: 9999;
}

.home-slider .owl-dots .owl-dot {
	display: block;
	margin-bottom: 10px;
}

.home-slider .owl-dots .owl-dot:last-child {
	margin-bottom: 0;
	margin-right: 0;
}

.home-slider .owl-dots .owl-dot span {
	background-color: #1067b0;
}

.home-slider .owl-dots .owl-dot.active span {
	background-color: #fff;
}



/*
|----------------------------------------------------------------------------
		4. APP OVERVIEW
|----------------------------------------------------------------------------
*/

.app-overview-icon {
	width: 25%;
}

.app-overview-content {
	width: 75%;
	padding-top: 17px;
	padding-bottom: 50px;
}

.app-overview-lists li:last-child .app-overview-content {
	padding-bottom: 0;
}

.app-overview-lists i {
	border: 1px solid #1067b0;
}

.app-overview-content h3 {
	font-weight: 400;
	margin-bottom: 10px;
}

.app-overview-content p {
	color: rgba(0, 0, 0, 0.502);
	line-height: 1.5;
}


/*
|----------------------------------------------------------------------------
		5. VIDEO
|----------------------------------------------------------------------------
*/

.video-area {
	background-image: url('../img/demo-4/video-bg.jpg');
	background-attachment: fixed;
	position: relative;
	padding: 80px 0 70px;
}

/*fix click for particles js*/
.video-area * {
	z-index: 10;
}

.video-play-icon i {
	width: 90px;
	height: 90px;
	line-height: 90px;
	padding: 0 0 0 6px;
	font-size: 25px;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
}

.video-play-icon i:hover {
	background-color: #1067b0;
	border: 2px solid #1067b0;
	border: 2px solid #1067b0;
}

.video-link {
	display: block;
	margin-top: 40px;
}

.video-link i {
	border: none;
	padding: 0;
	font-size: 16px;
}



/*
|----------------------------------------------------------------------------
		6. CUSTOMERS FEEDBACK
|----------------------------------------------------------------------------
*/

.customer-feedback .owl-item img {
	width: 70px;
	height: 70px;
}

.feedback-slider-item {
	position: relative;
	padding: 0 30px 30px;
	border-right: 1px solid #e5e5e5;
}

.customer-feedback .owl-stage-outer {
	border-right: 1px solid transparent;
}

.customer-name {
	margin-top: 25px;
	margin-bottom: 20px;
	font-size: 24px;
	font-weight: 700;
}

.feedback-slider-item p {
	line-height: 1.875;
}

.customer-feedback .owl-nav i {
	width: 43px;
	height: 43px;
	border-radius: 50%;
	background-color: #f6f6f6;
	color: #1067b0;
	font-size: 24px;
}

.customer-feedback .owl-nav i.icofont:hover {
	background-color: #1067b0;
	color: #fff;
}

.customer-feedback .owl-prev {
	left: -28px;
}

.customer-feedback .owl-next {
	right: -28px;
}



/*
|----------------------------------------------------------------------------
		7. BLOG
|----------------------------------------------------------------------------
*/

.blog-single img {
	width: 100%;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
	border-radius: 10px;
}

.blog-title {
	padding-top: 14px;
	margin-bottom: 9px;
}

.blog-single figure > a {
	overflow: hidden;
	display: block;
}

.blog-single figure img:hover {
	-webkit-transform: scale(1.2) rotate(-10deg);
	        transform: scale(1.2) rotate(-10deg);
}


/*
|----------------------------------------------------------------------------
		8. DOWNLOAD
|----------------------------------------------------------------------------
*/

.app-download-area {
	padding: 100px 0;
	overflow-x: hidden;
}

.app-download-content {
	margin-left: -15px;
}

.app-download-content h2 {
	font-weight: 300;
	font-size: 48px;
}

.app-download-content h5 {
	margin-top: 15px;
	margin-bottom: 25px;
	font-weight: 400;
}

.app-download-content p {
	margin-bottom: 25px;
}

.download-btn {
	margin-top: 75px;
}

.download-btn a {
	float: left;
}

.app-download-photo {
	position: relative;
	right: -100px;
	margin-bottom: -100px;
}


/*
|----------------------------------------------------------------------------
		9. SUBSCRIBE
|----------------------------------------------------------------------------
*/

/* ALL CSS are available in common.css file under CONTACT section */



/*
|----------------------------------------------------------------------------
		10. FOOTER
|----------------------------------------------------------------------------
*/

.footer-bottom {
	padding-top: 27px;
	padding-bottom: 24px;
	border-bottom: 2px solid #1067b0;
}

.copyright-text,
.footer-menu li a {
}

.footer-menu li a {
	padding: 0px 6px;
}



/*
|----------------------------------------------------------------------------
		11. BLOG
|----------------------------------------------------------------------------
*/
.page-header-area {
	background-image: url('../img/demo-4/blog/header-bg1.jpg');
	min-height: 300px;
	background-attachment: fixed;
	position: relative;
}

.page-header {
	padding-top: 100px;
    padding-bottom: 0;
    margin: 0;
    border-bottom: none;
}

.page-header a:hover,
.page-header a i,
.page-header a:hover {
	color: #fff;
	opacity: .8;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

.page-title {
	color: #fff;
}

.blog-page,
.single-blog-page {
	padding-bottom: 63px;
}

.blog-right {
	padding-left: 30px;
	border-left: 1px solid #e5e5e5;
}

.blog-left-sidebar .blog-right {
	border-left: none;
}

.blog-left-sidebar .blog-left {
	border-right: 1px solid #e5e5e5;
}

.blog-left {
	padding-right: 30px;
}

.single-post {
	padding: 60px 0;
	border-bottom: 1px solid #f7f7f7;
}

.single-post:first-of-type {
	padding-top: 0;
}

.single-post:last-of-type {
	border-bottom: none;
}

.single-post .flexbox-center {
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.blog-page .single-post figcaption {
	width: 62%;
}

.blog-page .post-thumb {
	width: 35%;
}

.post-thumb > a img {
	width: 100%;
}

.post-thumb > a {
	display: block;
	position: relative;
}

.post-thumb > a:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: #1067b0;
	opacity: .7;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	border-radius: 5px;
	-webkit-transition: .5s;
	transition: .5s;
	-webkit-transform: scaleX(0);
	        transform: scaleX(0);
}

.post-thumb > a:after {
    position: absolute;
    content: "\eeb6";
    font-family: 'icofont';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    margin: auto;
    -webkit-transition: .5s;
    transition: .5s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.post-thumb > a:hover:before {
	-webkit-transform: scaleX(1);
	        transform: scaleX(1);
}

.post-thumb > a:hover:after {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-webkit-transform: scale(1.4);
	        transform: scale(1.4);
} 

.post-title {
	font-size: 26px;
	margin-bottom: 12px;
}

.post-title a {
	color: #2b323f;
}

.post-details p {
	padding: 15px 0;
}

.post-extra a,
.post-extra i {
	padding-right: 3px;
}

.post-extra a:before {
	content: '/';
	padding-right: 5px;
}

.post-extra a:first-of-type:before,
.post-extra a:last-child:before {
	content: none;
} 

.post-details em {
	font-size: 14px;
	color: #808080;
}

.post-meta {
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	margin-top: 15px;
}

.post-meta li {
	padding-left: 7px;
	padding-right: 7px;
}

.single-blog-page .post-meta {
	margin-top: 50px;
}

.post-meta li,
.pager li a,
.post-extra a,
.rel-blog-single figcaption >a:last-child {
	position: relative;
	left: 0;
	-webkit-transition: all .2s;
	transition: all .2s;
}

.post-meta li:hover,
.pager li a:hover,
.post-extra a:hover,
.rel-blog-single figcaption > a:last-child:hover {
	left: -2px;
}

.post-extra a:hover,
.post-extra i:hover,
.post-meta a:hover,
.post-meta a:hover i,
.rel-blog-single figcaption > a:last-child:hover,
.rel-blog-single figcaption > a:last-child:hover i {
	color: #2b323f;
}

.post-title a:hover,
.post-details em:hover {
	color: #1067b0;
}

blockquote {
    padding: 20px 35px;
    font-size: 17px;
    border-left: 8px solid #1067b0;
    box-shadow: -3px 3px 15px rgba(204, 204, 204, 0.59);
    background: #f7f7f7;
    margin: 15px 0 15px 30px;
    position: relative;
    font-style: italic;
	font-family: serif;
	color: #5a5252;
}

blockquote:before {
    content: '\201c';
    position: absolute;
    font-size: 50px;
    line-height: 1;
    color: #1067b0;
    left: 5px;
    top: 15px;
}

.post-content ul,
.post-content ol {
	padding-left: 35px;
	margin-bottom: 20px;
}

.post-content ul li {
	position: relative;
	padding: 3px 0 3px 25px;
}

.post-content ul li:before {
	content: "•";
	color: #1067b0;
	font-weight: bold;
	font-size: 30px;
	line-height: 1;
	position: absolute;
	left: 0;
	top: 2px;
}

/*SHARE POST*/
.single-post .post-thumb {
	position: relative;
}

.social-share-post {
    text-align: center;
    position: absolute;
    right: 0;
    margin: 0;
    background-color: rgba(237, 57, 82, 0.9);
    z-index: 2;
    padding: 15px 25px;
    bottom: 0;
    border-radius: 25px 0 0px 0;
}

.social-share-post i,
.social-share-post li {
	color: #fff;
}

/*RELATED POSTS*/
.rel-post-title {
	text-transform: uppercase;
	font-weight: 500;
	font-size: 22px;
	margin-bottom: 20px;
}

.rel-blog-single img {
	width: 100%;
}

.rel-blog-single p {
	font-size: 15px;
}

.rel-blog-single figcaption > a:last-child {
	display: block;
	text-align: right;
	margin-top: 10px;
}

/*SIDEBAR*/
.sidebar-widget {
	margin-bottom: 40px;
}

.blog-right aside:last-of-type .sidebar-widget,
.blog-left aside:last-of-type .sidebar-widget {
	margin-bottom: 0;
}

.sidebar-widget .widget-title {
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 20px;
	padding-bottom: 10px;
	text-transform: uppercase;
	border-bottom: 1px solid #e5e5e5;
}

.sidebar-widget a {
	color: #2b323f;
}

.sidebar-widget a:hover {
	color: #1067b0;
}


/* Search Widget*/
.search-widget form {
	position: relative;
}

.search-widget input {
    background-color: #f7f7f7;
    border: none;
    color: #2b323f;
    height: 45px;
    padding: 10px 45px 10px 15px;
    width: 100%;
}

.search-widget input:focus {
	outline-color: #1067b0; 
}

.search-widget button {
    background: #1067b0;
    border: none;
    height: 45px;
    line-height: 45px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    border-radius: 0 4px 4px 0;
}

.search-widget button i {
	color: #fff;
    font-size: 18px;
}

/*Categories Widget*/
.categories-widget li ul {
	padding-left: 25px;
}
.categories-widget li li {
	padding-bottom: 5px;
	font-size: 14px;
}


/*Tags Widget*/
.tags-widget .widget-content a {
	border: 1px solid #e5e5e5;
	background-color: #1067b0;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    line-height: 30px;
    margin-bottom: 5px;
    margin-right: 2px;
    padding: 5px 15px;
    border-radius: 1px;
}

.tags-widget .widget-content a:hover {
	background-color: #f7f7f7;
    color: #1067b0;
}


/*Popular & Recent Post Widget*/
.popular-post-widget-single,
.recent-post-widget-single {
    border-bottom: 1px solid #f7f7f7;
    padding: 20px 0;
}

.popular-post-widget-single:first-of-type,
.recent-post-widget-single:first-of-type {
	padding-top: 0;
}

.popular-post-widget-single:last-of-type,
.recent-post-widget-single:last-of-type {
	border-bottom: none;
}

.popular-post-thumb,
.recent-post-thumb {
	float: left;
	width: 62px;
	margin-right: 20px;
}

.popular-post-content,
.recent-post-content {
	float: left;
    width: calc(100% - 82px);
}

.popular-post-content h4,
.recent-post-content h4 {
	font-size: 16px;
	font-weight: 400;
}

.post-date  {
    color: #757575;
    font-size: 12px;
    font-weight: 300;
    line-height: 1;
}

/*PAGINATION*/
.pagination li a,
.pagination li.disabled a {
	color: #1067b0;
	border-color: #1067b0;
}
.pagination li.active a,
.pagination li.active a:hover,
.pagination li a:hover,
.pagination li:not(.disabled) a:hover i,
.pager li a:hover {
	background-color: #1067b0;
	color: #fff;
	border-color: #1067b0;
}

.pagination li.disabled a:hover {
	border-color: #1067b0;
}

.pagination i,
.pager li a i {
	font-weight: 700;
}

.pager li a {
	border-color: rgba(237, 57, 82, 0.26);
	font-size: 15px;
	border-radius: 20px;
	padding: 9px 25px;
	border-radius: 24px;
}

.pager li a:hover i {
	color: #fff;
}

/*Comments*/
.comment-thumb {
	width: 60px;
	margin-right: 20px;
}

.comment-body {
	width: calc(100% - 80px);
}

.comments-list li {
	padding: 30px 0;
	border-bottom: 1px solid #f7f7f7;
}

.comments-list li:last-child {
	border-bottom: none;
}

.comment-title,
.comment-author,
.post-comment-title {
	text-transform: uppercase;
	color: #2b323f;
}

.comment-title,
.post-comment-title {
	font-size: 16px;
}

.comment-title {
	color: #1067b0;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding: 15px 30px;
	padding-bottom: 12px;
	cursor: pointer;
	font-weight: 400;
}

.comment-title:hover,
.comment-title-bg,
.comment-title-bg i,
.comment-title:hover i {
	background-color: #1067b0;
	color: #fff;
}

.comment-title-bg {
	border-radius: 3px;
}

.comment-title span,
.comment-time-ago {
	font-size: 14px;
	text-transform: none;
}

.comment-body p {
	font-size: 16px;
}

.comment-author {
	font-size: 14px;
	margin-bottom: 2px;
}

.comment-time-ago {
	margin-bottom: 22px;
}

.comment-body p {
	font-style: italic;
}

.reply-comments-list {
	padding-left: 80px;
	position: relative;
	top: 30px;
}

.post-my-comment .contact-field {
	margin-bottom: 25px;
}

.post-my-comment .btn-submit {
	font-weight: 400;
}

/*for slidetoggle*/
.comments-list,
.post-my-comment {
	display: none;
}

/*BLOG - Footer */
.page-blog .footer-widget .widget-menu li a,
.page-blog .footer-widget .widget-content p,
.page-blog .footer-widget .widget-title {
	color: #f7f7f7;
}

.page-blog .footer-area {
	padding-bottom: 0;
}

.page-blog .footer-bottom {
	padding-top: 27px;
	padding-bottom: 24px;
}

.page-blog .footer-menu li a {
	padding: 0px 6px;
}