/* #0. Other */
body {
	background-color: #fff;
	overflow-x: hidden;
	max-width: 100%;
	font-family: 'Poppins', sans-serif;
}
/* #0. End Other */


/* #1 - Header Section */
.header {
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.85)), to(rgba(255,255,255,1)));
	background-color: #191b20;
	height: 890px;
	background-image: url(../images/header-bg1.jpg);
	background-position: center top;
    background-repeat: no-repeat; 
    background-size: ;
}	
	.header h1 {
		color: #fff;
		font-size: 26px;
		font-weight: 700;
		line-height: 40px;
		margin-top: 182px;
	}
	.header h1>span, li>a>span {
		color: #1eb858;		
	}
	.header .list-inline>li>a {
		display: inline-block;
		margin-right: 15px;
		margin-left: 15px;
		color: #fff;
	}
	.header .list-inline>li>a:hover {
		text-decoration: none;		
	}
	.header .list-inline .active>a {
		border-bottom: 1px solid #ddd;
	}
	.header button {
		background-color: transparent;
		color: #1eb858;
		border-color: #333333;
		border-radius: 15px;
		padding: 10px 30px;
	}
		.header button:hover {
			border-color: #777777;			
			color: #1eb858;
			background-color: transparent;
		}

.navbar-brand>img {    
    position: absolute;
    top: 5px;
}

.navbar-default {
    background-color: transparent;
    border-color: transparent;        
}	
	.navbar-default .navbar-nav>li>a {
    	color: #fff;
	}
	.navbar-default .navbar-nav>li>a:hover {
    	color: #1eb858;
	}
.navbar-collapse {
	background-color: #;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #ddd;
    background-color: transparent;
}

.dropdown-menu {	
	background-color: #000;
}
	.dropdown-menu>li>a {
		color: #fff;
	}
	.dropdown-menu .divider {
		color: #333333;
	}

.menu {
	margin-top: 22px;
	height: 40px;	
}
	.menu, button {
		text-transform: uppercase;
	}	

.slider-menu {
	position: relative;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);    
    float: left;
    left: -10%;
    font-weight: 500;
    text-transform: uppercase;
    top: 100px;
}

.header-slider ul {
	list-style-type: inline-block;
}
	.header-slider img {
		position: relative;
		height: 531px;
		left: 50%;
	}
	.header-slider .img-slider-left img {
		position: relative;
	}

.image-center {
	left: 41%;
	top: 371px;
	position: absolute;
}

.image-left {
	left: 26%;
	z-index: -1;
	top: 460px;
	position: absolute;
}

.image-right {
	left: 58%;
	z-index: -1;
	top: 460px;
	position: absolute;
}
/* #1 - End Header Section*/



/* #2 - Download area*/
.download {
	background-color: #f7f7f7;
	min-height: 375px;
	padding: 100px 0;
}	
	.download h1 {
		font-size: 26px;
		font-weight: 800;
	}
	.download h1>span {
		color: #1eb858;
		text-transform: none;
	}
	.download span {
		color: #abafb8;
		text-transform: uppercase;		
	}

.download-button {
	margin-top: 50px;
	background-color: #fff;
	height: 70px;
	padding: 15px 0;
	position: relative;
	max-width: 290px;
	-webkit-box-shadow: 0 1px 4px 0 rgba(204,204,204,0.75);
    box-shadow: 0 1px 4px 0 rgba(204,204,204,0.75);
}
	.download-button a:hover {
		text-decoration: none;
	}
	.download-button img {
		position: absolute;
		top: 15px;
		left: 30px;
	}
	.download-button span {
		display: block;
		text-transform: none;
		padding-left: 30%;							
	}
	.download-button .app {
		text-transform: uppercase;
	}
	.download-button .store {
		color: #000;
		font-size: 22px;
	}	
/* #2 - Download area*/



/* #3 Gallery Screenshot Area */
.gallery {
	background-color: #fff;
	padding: 180px 0;
}
	.gallery h1 {
		font-size: 26px;
		font-weight: 800;
	}
		.gallery h1>span {
			color: #1eb858;
			text-transform: none;
		}
		.gallery span {
			color: #abafb8;
			text-transform: uppercase;
		}
/* #3 End Gallery Screenshot Area */



/* #4 App Details Area */
.app-details {
	background-image: url("../images/green-stripe.png");
	background-position: center top;
    background-repeat: no-repeat;    
    position: relative; 
}
	.app-details h1 {
		font-size: 26px;
		font-weight: 800;
		margin-bottom: 20px;		
	}
	.app-details span {
		color: #abafb8;
		text-transform: uppercase;		
	}	
	.app-details ul {		
  		list-style-image: url("../images/bullet-list.png");
  		padding: 30px 20px; 
	}
	.app-details ul>li {
		line-height: 20px;
		margin-bottom: 20px;
		font-family: "Myriad Pro";
		font-size: 18px;
	}
		.app-details ul>li>img {
			padding: 16px 30px;
			border: 1px solid #f0f0f0;
			-webkit-box-shadow: 0 1px 4px 0 rgba(204,204,204,0.75);
    		box-shadow: 0 1px 4px 0 rgba(204,204,204,0.75);
		}
		.app-details .list-inline {
			padding: 20px 0;
		}
.panel-group {
	padding: 30px 0;
}

.panel-default>.panel-heading {
	background: #fff;	
}

.img-front-rg {
	z-index: 11;		
	position: relative;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);	
}

.img-back-rg {
	z-index: 10;
	position: absolute;		
	transform: translateX(-50%);
	margin-top: 65px;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);	
}

.img-front-lf {
	z-index: 11;		
	position: relative;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);	
}

.img-back-lf {
	z-index: 10;
	position: absolute;		
	transform: translateX(-167%);
	margin-top: 65px;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
}

.img-left, .img-right {
	position: relative;
	padding: 70px 0;
}
/* #4 End App Details Area */



/* #5 App Specs Area */
.app-specs {
	padding: 80px 0;
	background-image: url("../images/green-stripe.png");
	background-position: center top;
    background-repeat: no-repeat;    
    position: relative;
}
	.app-specs h1 {
		font-size: 26px;
		font-weight: 800;
	}
	.app-specs h1>span {
		color: #1eb858;
		text-transform: none;
	}
	.app-specs span {
		color: #abafb8;
		text-transform: uppercase;			
	}
	.app-specs ul li {
		display: inline-block;		
		min-width: 250px;		
	}

.button-box {		
	background-color: #000;	
	height: 70px;
	padding: 20px 0;
	margin: 30px 0;
	-webkit-box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 15px 0 rgba(0,0,0,0.25);		
}
	.button-box:hover {
		border-bottom: 5px solid #1eb858;
	}
	.button-box img {
		height: 30px;
		padding: 0 10px;
	}
	.button-box a {
		color: #fff;
		font-size: 16px;
	}
		.button-box a:hover {
			text-decoration: none;
		}

.izometric {
	margin: 100px 0;
}	
	.izometric img {
		width: 350px;
	}
	.izometric .row {
		
	}

	.left, .right {
		margin-top: 100px;
	}

/* #5 End App Specs Area */



/* #6 App Stats Area */
.app-stats {
	padding: 40px 0;
}
	.app-stats h1 {
		font-size: 26px;
		font-weight: 800;
	}
	.app-stats h1>span {
		color: #1eb858;
		text-transform: none;
	}
	.app-stats span {
		color: #abafb8;
		text-transform: uppercase;			
	}

.stats-box {
	border-top: 5px solid #1eb858;
	border-left: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
	height: 350px;
	padding: 100px 0;
	margin: 60px 0;
	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
}
	.stats-box>.number {
		font-weight: 800;
		font-size: 72px;
		color: #1eb858;
	}
	.stats-box>.text {
		font-weight: 500;
		font-size: 16px;
		color: #000;
	}
/* #6 App Stats Area */



/* #7 Twitter Feed Area */
.twitter-feed {
	background-color: #1c57ff;
	height: 315px;
	-webkit-box-shadow: inset 0px 0px 10px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0px 0px 10px 2px rgba(0,0,0,0.15);
	box-shadow: inset 0px 0px 10px 2px rgba(0,0,0,0.15);
	margin: 20px 0;	
}
	.twitter-feed span {
		color: #fff;		
		text-align: left;	
	}
		.twitter-feed span a {
			text-decoration: underline;
			color: #fff;
		}
		.twitter-feed span a:hover {
			text-decoration: none;			
		}
	.twitter-feed .twitter-button {
		text-transform: none;
		font-size: 14px;		
		position: relative;
		padding: 7px 15px;
		z-index: 10;
		float: left;
		background-color: #000;
		color: #fff;
		border: 0;
		transform: translateY(-50%);		
		-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
		box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	}	
	.twitter-feed .twitter-content {
		padding: 125px 0;
	}
/* #7 End Twitter Feed Area */



/* Back to top */
.back-to-top {
    float: right;
    position: relative;    
    display: none;
    top: -35px;
    right: 3%;
}

.btt .btn-primary {	
	background-color: #fff;
	border: 1px solid #fefefe;
	border-radius: 0;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	box-shadow: 0 0 10px 0 rgba(0,0,0,0.25);
	padding: 4px 9px;
}
	.btt .btn-primary:hover {
		background-color: #fff;
		border: 1px solid #fefefe;
		color: #fff;
	}

	.btt .glyphicon  {
		color: #1eb858;		
	}
/* Back to top */



/* #8 Footer */
.footer {
	margin: 70px 0;
}
	.footer p {
		font-size: 16px;
		padding: 20px 0;
	}
	.footer ul {
		list-style-type: none;
		font-size: 16px;
		padding: 10px 0;	
	}
		.footer ul li a {
			color: #000;
			line-height: 35px;
			border-bottom: 1px solid #eee;
		}
		.footer ul li a:hover {
			text-decoration: none;	
			border-bottom: 1px solid #1eb858;
		}	
/* #8 End Footer */



/* #9 Instagram */
.instagram-feed img {
	width: 100%;
    height: auto;
    opacity: .3;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
	.instagram-feed img:hover {
		width: 100%;
	    height: auto;
	    opacity: 1;
	    -webkit-filter: none;
    	filter: none;
    	-webkit-transition: opacity .5s ease-in, filter .5s ease-in;
	    -moz-transition: opacity .5s ease-in, filter .5s ease-in;
	    -ms-transition: opacity .5s ease-in, filter .5s ease-in;
	    -o-transition: opacity .5s ease-in,filter .5s ease-in;	    
	}
	.instagram-feed .list-inline>li {
		padding-right: 0;
		padding-left: 0;
	}
/* #9 End Instagram */


/* #10 @Media */
@media (min-width: 1200px) {
	.app-stats .col-lg-offset-1 {
	    margin-left: 12.333333%;
	}
}

@media (max-width: 991px) {
	.navbar-brand {
		display: none;
	}
}

@media (max-width: 767px) {
	.navbar-default .navbar-toggle {
    	border: 0;
	}
	.navbar-brand {
		display: initial;
	}
	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		position: relative;
		background-color: #000;
		border-color: #888888;
		z-index: 20;
	}
	.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
		background-color: transparent;
	}
	.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
	    color: #888888;
	    background-color: #000;
	}
	.navbar-default .navbar-nav .open .dropdown-menu>li>a {
		color: #fff;
	}
	.image-left, .image-right {
		display: none;
	}
	.img-left, .img-right {
		padding: 0;
	}
	.slider-menu {
		display: none;
	}
	.left, .right {
		margin: 0;
	}
	.izometric {
		margin: 0;
	}
	.gallery {   
   		padding: 0;
	}
	.img-back-rg, .img-back-lf {
		display: none;
	}
	.image-center {
		left: 27%;
	}
}

@media (max-width: 400px) {
	.app-details ul>li>img {
		padding: 16px 24px;
	}

	.izometric img {
		width: 250px;
	}

	.img-front-rg, .img-front-lf {
		width: 100%;
	}	

	.instagram-feed .list-inline>li {
		width: 16%;
	}
	.header h1 {
		margin-top: 75px;
	}
}
/* #10 End @Media */



/* Other scripts */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: #ddd;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

.fa {
	color: #1eb858;
	font-size: 40px;	
}

.twitter-feed .fa {
	font-size: 18px;
	color: #4099ff;
}

.twitter-content .fa {
	color: #fff;
	font-size: 18px;
	position: absolute;
	left: -25px;
}

.owl-carousel {
	padding: 50px 0;
}
	.owl-carousel img {
		-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
		box-shadow: 0 0 5px 0 rgba(0,0,0,0.25);
	}

/*.owl-dots {
  position: absolute;
  right: 0;
  top: -50px;  
}*/
/* Other scripts */

.list-dropdown .fa {
	position: relative;
	top: 10px;
	padding-right: 10px;
}

.list-dropdown a {
	position: relative;
	bottom: 10px;
}

.panel-heading .accordion-toggle:after {
	position: relative;
	top: 20px;
}