/*------------------------------------*\
  #BODY and #IMG
\*------------------------------------*/


html, body {
	height:100%;
}

body {
	font-family: "Roboto";
	font-size: 17.5px;
}

img {
	max-width: 100%;
}

#logo {
	max-width: 100px;
	padding-right: 10px;
}

#footer-logo {
	max-width: 125px;
}

#image-1, #image-2, #image-3, #image-4, #image-5, #image-6, #image-7, #image-8 {
	height: 200px;
}


/*------------------------------------*\
  #BACKGROUND FORMATTING
\*------------------------------------*/


.bg-gradient {
	/* Gradient background with white font */
	background: #141E30;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to bottom right, #000000, #002250, #00439D);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to bottom right, #000000, #002250, #00439D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	color: #FFFFFF;
}

.bg-enterprise {
	/* Blue background with white font */
	background-color: #00439D;
	color: #FFFFFF;
}

.bg-gray {
	/* Light gray background */
	background: #F5F5F5;
}


/*---------------------*\
  #NAV & NAVBAR
\*---------------------*/


.navbar {
	/* White navbar on every page */
	background: #FFFFFF;
	-webkit-box-shadow: 5px 5px 30px 3px rgba(0,0,0,0.05);
	-moz-box-shadow: 5px 5px 30px 3px rgba(0,0,0,0.05);
	box-shadow: 5px 5px 30px 3px rgba(0,0,0,0.05);
}

.navbar-brand {
	/* Text logo - not currently in use */
	font-size: 32px;
	font-weight: 400;
}

.navbar-nav {
	/* Features, Use Cases, and Pricing formatting */
	font-size: 18px;
	font-weight: 400;
}

.navbar-nav>li>a {
	/* Features, Use Cases, and Pricing formatting */
	margin-left: 10px;
}

.navbar-nav>li>a:hover {
	/* Features, Use Cases, and Pricing formatting */
	text-decoration: underline;
}


/*---------------------*\
  #INDEX SECTION 1
\*---------------------*/


.index-section-1 {
	padding-top: 125px;
	padding-bottom: 125px;
}

.index-section-1 h1 {
	/* Dashboards as a Service */
	font-size: 75px;
	padding-bottom: 25px;
}

.index-section-1 h5 {
	/* Alluxo's hosted dashboards are the best way to share data, graphs, and insights across your departments. Get started today to reclaim countless hours. */
	font-size: 22.5px;
	font-weight: 300;
	padding-bottom: 25px;
}

@media all and (max-width: 991px) { /* screen size until 991px */
	.index-section-1 {
		padding-top: 75px;
		padding-bottom: 75px;
	}
	.index-section-1 h1 {
		font-size: 45px;
	}
	.index-section-1 h2 {
		font-size: 20px;
	}
}


/*---------------------*\
  #INDEX SECTION 2
\*---------------------*/


.index-section-2 {
	padding-top: 50px;
}

.index-section-2 h1 {
	/* Make communication your competitive advantage */
	font-size: 50px;
}

.index-section-2 h5 {
	/* Data-Informed Decisions */
	/* Save Precious Resources */
	/* Better Products & Services */
	padding-top: 35px;
}

.index-section-2 p {
	/* Create business dashboards in 4 minutes. Share data with your team to make data-informed decisions. */
	/* Let us handle integrations, formatting, hosting, and the unglamorous parts – saving you precious internal resources. */
	/* Your engineers can focus on product development, instead of hacking together your in-house analytics. */
	padding-top: 20px;
}

.index-section-2-image {
	max-height: 100px;
}

.small-card {
	padding-top: 25px;
	padding-bottom: 25px;
	margin-top: 50px;
}

.small-card:hover {
	border: 1px solid #00439D;
}


.device-cta {
	padding-top: 100px;
	padding-bottom: 100px;
}

.device-cta h4 {
	/* Sign up today to increase visibility and communication across your team. */
	padding-top: 30px;
	padding-bottom: 0px;
}

#device-cta {
	max-height: 350px;
}

@media all and (max-width: 991px) { /* screen size until 991px */
	.index-section-2 h1 {
		font-size: 40px;
	}
	.small-card {
		margin-left: 10%;
		margin-right: 10%;
	}
}

@media all and (max-width: 767px) { /* screen size smaller than 767px */
	.index-section-2 h1 {
		font-size: 30px;
	}
	.small-card {
		margin-left: 2.5%;
		margin-right: 2.5%;
	}
}


/*---------------------*\
  #INDEX SECTION 3
\*---------------------*/


.index-section-3 h1 {
	/* Create and publish dashboards in minutes, not weeks */
	font-size: 50px;
}

.index-section-3 h2 {
	/* Reduce meetings and email volume */
	/* Share with coworkers, customers, and more */
	/* Designed for how you work */
}

.index-section-3 p {
	/* Visualize your projects and project status on a webpage. Stop fielding "Where are we with that project?" questions once and for all. */
	/* Alluxo's business dashboards are published to a URL. Share your data with your team, company, customers, investors, and more. */
	/* Alluxo connects, using secure APIs, to the tools you already use. We're a fully hosted solution, so don't worry about writing code or maintaining infrastructure. */
	padding-top: 20px;
}

.feature-1 {
	padding-top: 100px;
}

.feature-2 {
	padding-top: 100px;
}

.feature-3 {
	padding-top: 100px;
	padding-bottom: 100px;
}

@media all and (max-width: 991px) { /* screen size until 991px */
	.index-section-3 {
		text-align: center;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.index-section-3 h1 {
		font-size: 40px;
	}
	.index-section-3 h2 {
		padding-top: 25px;
	}	
}


/*---------------------*\
  #INDEX SECTION 4
\*---------------------*/


.index-section-4 {
	padding-top: 100px;
	padding-bottom: 75px;
}

.index-section-4 h4 {
	/* KPI Dashboard, OKR Dashboard, etc. */
	padding-top: 25px;
}

.index-section-4 p {
	/* Track all of your Key Performance Indicators (KPIs) in one Alluxo dashboard ... */
	padding-top: 10px;
	padding-bottom: 25px;
}

.section-4-image {
	max-height: 100px;
	padding-top: 25px;
}

@media all and (max-width: 991px) { /* screen size until 991px */
	.index-section-4 {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}


/*---------------------*\
  #INDEX SECTION 5
\*---------------------*/


.index-section-5 {
	padding-top: 75px;
	padding-bottom: 75px;
}

.index-section-5 h2 {
	/* There's a better way */
	padding-top: 25px;
	padding-bottom: 5px;
}

.index-section-5 p {
	/* You're spending weeks building "custom" solutions and they're not cutting it. Don't worry – teams just like yours are using Alluxo to create dashboards in minutes. We'll show you best data practices for sharing data across teams and organizations. */
	padding-bottom: 5px;
}


/*---------------------*\
  #FOOTER
\*---------------------*/


.footer {
	padding: 50px 0px;
	color: #000000;
}