/* General 
============================================================================= */

#banner {
	display: block;
}

.wrapper {
    max-width: 1020px;
}

.footer-wrapper {
	text-align: center;
}

/* Branding */

h2.branding {
	font-size: 24px;
	font-size: 2.4rem;
	position: relative;
	top: 22px;
}

/* Headings */

h2 {
  font-size: 36px;
  font-size: 3.6rem;
  margin-bottom: 10px;
}

	.home h2 {
		text-align: center;
	}

/* Sub Headings */

h3 {
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 20px;
	font-weight: 300;
}

	.home h3 {
		text-align: center;
		width: 640px;
		margin: 0 auto;
		margin-bottom: 50px;
		line-height: 1.8em;
	}
	
	h3.trial {
		margin-bottom: 15px;
	}

h4 {
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 20px;
}

p/*,
input */{
	font-size: 1.6rem;
	font-size: 16px;
	font-weight: 300;
}

/* Header
============================================================================= */

header {
	position: fixed;
	z-index: 98;
	width: 100%;
	top: 0;
	left: 0;
	
	height: 100px;
}

	/* Branding */
	
	h2.branding {
		margin-top: -5px;
	    display: block;
	    width: 177px;
	    height: 27px;
	    text-indent: -9999em;
	    background: url(../../images/musicmetric.svg) no-repeat;
	    background-size: 100%;
	}
	
		h2.branding a {
			display: block;
			width: 177px;
			height: 27px;
		}
	
		.no-svg h2.branding {
		    width: 177px;
		    height: 27px;
		    text-indent: -9999em;
		    background: url(../../images/musicmetric.png) no-repeat;
		}

/* Content Spacers
============================================================================= */

.pusher { /* Push content down from under fixed header */
	margin-top: 160px; /* 70px header + 60px padding */
}

.home {
	padding-top: 30px;
}

/* Home
============================================================================= */

#home {
	min-height: 520px;
	background: #0c0c0c url(../../images/crowd.png) no-repeat right 25%;
}

	#home-content {
		position: relative;
		padding: 190px 0 0 40px;
		max-width: 820px;
	}
	
	#home-content h1 {
		color: rgba(255, 255, 255, .95);
		font-size: 48px;
		font-size: 4.8rem;
		font-weight: 400;
		margin-bottom: 20px;
		text-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
	}
	
	#home-content h3 {
		color: rgba(255, 255, 255, .45);
		max-width: 600px;
		font-weight: 300;
		font-size: 20px;
		font-size: 2.0rem;
		line-height: 1.6em;
		text-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
		margin-bottom: 30px;
	}
	
	#home-content h4 {
		font-size: 18px;
		font-size: 1.8rem;
		font-weight: 300;
		color: rgba(255, 255, 255, .25);
		margin-bottom: 5px;
	}
	
	input.home-search {
		width: 250px;
	}
	
	button.search-button {
		width: 100px;
		margin-left: 10px;
	}
	
	div#placeholder {
		margin-bottom: 50px;
		/*height: 400px;*/
		text-align: center;
	}
	
	#home-services {
		margin-bottom: 50px;
	}
	
		#home-services h2 {
			font-size: 25px;
			font-size: 2.5rem;
		}

	.cust_carousel {
		position: relative;
		max-width: 840px;
		margin: 0 auto;
	}
	.cust_carousel .prev, .cust_carousel .next {
		position: absolute;
	}
	.cust_carousel .next {
		right: 0px;
	}	
	
	#customers {
		max-width: 634px;
	}
	@media screen and (min-width: 800px) {
		#customers {
			max-width: 734px;
		}
	}	

	.customers-h3 {
		max-width: 500px;
		margin: 0 auto;
	}
	
			
/* Big headers (sign in, sign up, newsletter, features, services etc)
============================================================================= */

.big h1 {
	color: #282828;
	font-size: 42px;
	font-weight: 400;
	margin-bottom: 15px;
}

.big h3 {
	color: #A0A0A0;
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.8em;	
	width: 600px;
	margin: 0 auto;
	margin-bottom: 40px;
}

/* Form pages (sign in, sign up, newsletter etc)
============================================================================= */

.form {
	text-align: center;
}

	.form form {
		margin-bottom: 30px;
		width: 360px;
		margin: 0 auto;
	}

	.form input[type="text"],
	.form input[type="password"],
	.form button {
		display: block;
		margin: 0 auto;
		margin-bottom: 15px;
	}
	
	.form button {
		margin-bottom: 30px;
	}
	
	.form h6 {
		font-weight: 400;
		font-size: 15px;
		font-size: 1.5rem;
		margin-bottom: 20px;
		width: 600px;
		margin: 0 auto;
	}

/* Features and Services
============================================================================= */

#product-overview {
	box-sizing: border-box;
	padding: 0 100px 0 100px;

	/*background: red;*/
}

	#product-overview .row {
		margin-bottom: 30px;
	}
	
	#product-overview .image {
		/*background: #EBEBEB;*/
		width: 45%;
		height: 300px;
	}
	
	#product-overview .copy {
		/*background: pink;*/
		width: 51%;
		padding-left: 4%;
	}
	
		#product-overview .copy h4 {
			color: #717171;
			font-weight: 300;
			font-size: 22px;
			font-size: 2.2rem
		}
		
		#product-overview .copy p {
			color: #878787;
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 1.8em;
			margin-bottom: 20px;
			font-weight: 300;
		}
	
	#product-overview .right {
		float: right;
	}
	
	#product-overview .left {
		float: left;
	}
				
/* General (about/legal sub nav sections etc)
============================================================================= */

.general {
	/*min-height: 400px;*/
	box-sizing: border-box;
	padding: 0 40px 0 261px;
	float: left;
}

	#general-content {
		width: 100%;
		padding-left: 60px;
		border-left: 1px solid #E7E7E7;
		float: right;
		/*margin-left: 180px;*/
		
		min-height: 300px;
	}
	
	#single-content {
		width: 100%;
		width: 680px;
		margin: 0 auto;
	}
	
		#general-content h2,
		#single-content h2 {
			color: #282828;
			font-weight: 400;
			margin-bottom: 30px;
			line-height: 1.4em;
		}
		
		#general-content h3,
		#single-content h3 {
			color: #717171;
			font-weight: 300;
			font-size: 22px;
			font-size: 2.2rem;
			line-height: 1.6em;
		}
		
		#general-content h4,
		#single-content h4 {
			color: #AEAEAE;
			font-weight: 300;
			font-size: 18px;
			font-size: 1.8rem;
		}
		
		#general-content p,
		#single-content p {
			color: #878787;
			font-size: 16px;
			font-size: 1.6rem;
			line-height: 1.8em;
			margin-bottom: 20px;
			font-weight: 300;
		}
		
		#general-content ul,
		#single-content ul {
			color: #878787;
			font-size: 16px;
			font-size: 1.6rem;
			margin-bottom: 20px;
			font-weight: 300;
		}
		
			#general-content ul li,
			#single-content ul li {
				margin-bottom: 8px;
				line-height: 1.8em;
				list-style-type: disc;
				margin-left: 50px;
			}
	
	#general-nav {
		width: 180px;
		position: absolute;
		left: 40px;
	}
	
		#general-nav nav ul {
			text-align: right;
			font-size: 16px;
			font-size: 1.6rem;
		}
		
			#general-nav nav ul li a {
				display: block;
				padding: 10px;
				transition: all 0.15s ease-in-out;
				color: #B3B3B3;
				border-bottom: none;
			}
			
			#general-nav nav ul li a:hover {
				/*background: #F7F7F7;*/
				color: #515151;
			}
			
				#general-nav nav ul li.current_page_item a {
					background: #F6F7F7;
					color: #515151;
				}

/* About
============================================================================= */

#general-content ul.team {
	max-width: 720px;
}

#general-content ul.team li {
	float: left;
	width: 20%;
	box-sizing: border-box;
	/*margin-bottom: 30px;*/
}

#general-content ul.team li:nth-child(3n) { 
	margin-right: 4.166%; 
}

#general-content ul.team li:nth-child(3n) + li {
	clear: none;
}

#general-content ul.team li:nth-child(4n) { 
	margin-right: 0; 
}

#general-content ul.team li:nth-child(4n) + li {
	clear: left;
}

/* Blog
============================================================================= */

/*article.post h2 {
	font-size: 28px;
	font-size: 2.8rem;
	margin-bottom: 0 !important;
}*/

#single-content article p.post-cats {
	font-size: 14px;
	font-size: 1.4rem;
}

#disqus_thread {
	margin-top: 40px;
}

/* Nav
============================================================================= */

.site-nav {
    display: block;
    z-index: 2000; 
    text-transform: uppercase;
    letter-spacing: 1px;
}
    
    .site-nav ul {
        float: right;
        z-index: 2000;
    }
        
        .site-nav li {
            display: inline-block;
            line-height: 65px;
            margin-right: 20px;
        }
        
        	.site-nav li:last-of-type {
        	    margin-right: 0;
        	}
        
        .site-nav a {
           /* position: relative;*/
            color: #8C8C8C;
            color: rgba(0, 0, 0, .45);
            font-size: 1.4rem;
            font-size: 14px;
            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
            -webkit-font-smoothing: subpixel-antialiased !important;
        }
    
        
        .site-nav a:hover {
            color: rgba(0, 0, 0, .95);
            text-decoration: none;
        }

/* Footer
============================================================================= */

#trial {
	padding: 35px 0 40px 0;
	margin-top: 70px;
}

	#trial input {
		width: 400px;
	}
	
	#trial button {
		width: 150px;
		margin-left: 10px;
	}

footer {
	color: #fff;
	text-align: center;
	padding: 30px 0 30px 0;
}
	
	footer ul {
		font-size: 1.5rem;
		font-size: 15px;
	}
	
	footer ul li {
		display: inline-block;
	}
	
	footer ul.footer-nav li:not(:last-of-type):after,
	footer ul.footer-copyright li:not(:last-of-type):after {
		content: " ⋅";
	}
	
	/*footer ul span.footer {
		background: green;
	}*/
	
	footer ul li {
		line-height: 2em;
	}
	
	/*footer li a.icon-github,
	footer li a.icon-twitter {
		display: block;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
	}
	
	footer li a.icon-github {
		background: url(../../images/icon-footer.svg) no-repeat 0 0;
		width: 23px;
		height: 18px;
	}
	
		.no-svg footer li a.icon-github {
			
		}
	
	footer li a.icon-twitter {
		background: url(../../images/icon-twitter.svg) no-repeat;
		width: 20px;
		height: 17px;
		margin: 0 20px 0 20px;
	}
	
		.no-svg footer li a.icon-twitter {
			
		}*/


/* Mobile Nav
============================================================================= */

.mobile-nav, .mobile-menu-trigger, .mobile-menu {
    display: none;
}

body.active .mobile-nav {
    right: -100%;
}

body.active .mobile-slide {
    left: 0;
}

/* How we do it
============================================================================= */

.wedoit {
	width: 86%;
}

/* Featured Posts
============================================================================= */

#featured {
	margin: 7em 0;
}
#featured-content {
	position: relative;
	margin-top: 100px;
	left: 7%;
} 
#featured-content ul {
	margin: 2em 0;
}
#featured-content ul li {
	float: left;
	width: 30%;
}
#featured-content a {
	/*text-decoration: none;*/
}
#featured-content h2 {
	width: 87%;
	margin: 0.5em 0 1em;
	padding: 6px 4px;
	font-size: 18px;
}     
#featured-content img {
	width: 93%;
}
#featured-content:after {
  content: "";
  display: table;
  clear: both;
}

/* Your Needs
============================================================================= */

.your-needs-content h2 {
	margin: 0 0 3em;
}
.your-needs-content p {
	font-size: 15px;
}
#icons-grid {
	margin: 5em 0 3em 10px;
	width: 100%;
}
#icons-grid ul {
	width: 100%;
	margin: 0;
}
#icons-grid ul li {
	width: 22%;
	margin: 1em 0.5em;
	padding: 0 3px;
	line-height: 1.8em;
	list-style-type: none;
}
#icons-grid ul li:nth-child(4n) {
	margin-right: 0;
}
#icons-grid ul li p {
	padding: 8px 0;
	line-height: 19px;
	font-size: 15px;
}
.dashboard, .services {
	float: left;
	width: 47%;
	margin: 0 10px;
}

/* Testimonials
============================================================================= */

@media only screen and (min-device-width : 769px) {
	.testimonials-content h2 {
		margin: 0 0 3em;
	}
	.testimonials-content p {
		font-size: 15px;
	}
	.testimonial {
		position: relative;
		margin: 80px 0 100px;
		padding-left: 80px;
		text-align: left;
	}
	.testimonial img, .testimonial a {
		position: absolute;
	}
	.testimonial img {
		float: left;
		top: 18%;
		left: -125px;
	}
	.testimonial p {
		width: 600px;
	}
	.testimonial a {
		font-size: 11px;
		float: right;
		top: 51px;
		right: -100px;
	}
}