/*
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 1 CSS
*	Primary color: #0d95c7
*   CSS INDEX
====================================================

		TOC:
		0.  GENRAL
		1.  HEADER
		2.  MENU
		3.  BANNER
		4.  FEATURED
		5.  APP OVERVIEW
		6.  USER ACTIVITY
		7.  SCREENSHOTS
		8.  DOWNLOAD
		9.  FOOTER
		10.	BLOG

===================================================================== */
a[id]:before {
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

/* ------------------------------------------------------------------ */
/* 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: #0d95c7;
	width: 65%;
}

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

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

.icofont {
	color: #0d95c7;
}

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

.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, #0d95c7 30%, #ec3891 90%);
	background: linear-gradient(to right, #0d95c7 30%, #009eda 90%);
}


/*
|----------------------------------------------------------------------------
		2. MENU
|----------------------------------------------------------------------------
*/
.navbar {
	margin-bottom: 0;
}

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

.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;
}


/* 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: #0d95c7;
}

.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;
}

.nav li:hover > ul {
	display: block;
}

/*
|----------------------------------------------------------------------------
		3. BANER
|----------------------------------------------------------------------------
*/

.home-banner {
	background-image: url('../img/demo-1/header-bg1.jpg');
	background-color: rgba(0,0,0,.5);
	background-attachment: fixed;
	height: 700px;
}

.home-banner .container {
	position: relative;
	height: 100%;
}

.home-banner .container .row {
	position: absolute;
	bottom: 0;
	left: 15px;
	right: 15px;
}

.banner-text {
	position: relative;
	top: -65px;
	z-index: 10;
}

.banner-text * {
	color: #fff;
}

.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: #0d95c7;
}

/*
|----------------------------------------------------------------------------
		4. FEATURED
|----------------------------------------------------------------------------
*/

.featured-item {
	padding: 35px 12px 70px;
}

.featured-item h3 {
	margin-top: 40px;
	margin-bottom: 30px;
	font-weight: 500;
}

.featured-item i {
	font-size: 60px;
	border-color: rgb(234, 234, 234);
}



/*
|----------------------------------------------------------------------------
		5. 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 #0d95c7;
}

.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;
}



/*
|----------------------------------------------------------------------------
		6. USER ACTIVITY
|----------------------------------------------------------------------------
*/

.user-piechart .chart {
	position: relative;
}

.user-piechart .chart span {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 300;
}

.user-piechart h4 {
	margin-top: 40px;
}



/*
|----------------------------------------------------------------------------
		7. SCREENSHOTS
|----------------------------------------------------------------------------
*/

.screenshot-item {
	position: relative;
}

.screenshot-item img {
	height: 100%;
}

.screenshot-overlay,
.screenshot-overlay i {
	position: absolute;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transition: visibility .2s ease-in, opacity .3s ease-in-out, background .4s ease-out;
	transition: visibility .2s ease-in, opacity .3s ease-in-out, background .4s ease-out;
}

.screenshot-overlay {
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, .8);
	z-index: 1;
}

.screenshot-overlay i {
	background-color: #0d95c7;
	color: #fff8ee;
	border: none;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}

.screenshot-item:hover .screenshot-overlay,
.screenshot-item:hover .screenshot-overlay i {
	visibility: visible;
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

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

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

.copyright-text,
.footer-menu li a {
	color: rgb(48, 48, 48);
}

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



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

.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: #0d95c7;
	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: #0d95c7;
}

blockquote {
    padding: 20px 35px;
    font-size: 17px;
    border-left: 8px solid #0d95c7;
    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: #0d95c7;
    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: #0d95c7;
	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: #0d95c7;
}


/* 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: #0d95c7; 
}

.search-widget button {
    background: #0d95c7;
    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: #0d95c7;
    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: #0d95c7;
}


/*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: #0d95c7;
	border-color: #0d95c7;
}
.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: #0d95c7;
	color: #fff;
	border-color: #0d95c7;
}

.pagination li.disabled a:hover {
	border-color: #0d95c7;
}

.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: #0d95c7;
	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: #0d95c7;
	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;
}