src/scss/ddgc/_duckduckhack-intro.scss
/*
	DuckDuckHack Intro Page
*/

.ddhi {
	text-align: center;
	overflow: hidden;
}
	.ddhi .row {
		padding-top: 40px;
		padding-bottom: 40px;
		overflow: hidden;
	}
	
	.ddhi h1, .ddhi h2, .ddhi h3, .ddhi h4, .ddhi h5, .ddhi h6, .ddhi__title, .caption {
		color: #48505b;
	}
	
	.ddhi h2 {
		font-size: 30px;
	}

.row--standout {
	background-color: #fff;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: #bdbdbd;
}

.ddhi__intro {
	padding: 60px 0;
}	

	.ddhi__intro-screen {
		margin: -30px auto 0;	
		position: relative;	
		width: 450px;
		
	}
	.ddhi__intro-screen__img {		
		position: absolute;
		top: 0;
		left: 0;			
		right: 0;
		margin: auto;
		padding: 3px;
		//border: 1px solid #bdbdbd;		
		-webkit-box-shadow: 0px 0px 4px 0px #bdbdbd;
        box-shadow: 0px 0px 4px 0px #bdbdbd;
		-webkit-border-radius: 3px;
        border-radius: 3px;
	}
	.ddhi__intro-screen__icon {
		position: absolute;
		top: 245px;
		left: 10px;
	}
		.ddhi__intro-screen__icon--primary {
			top: 50px;
		}

	@media only screen and (max-width: 40em) {
		.ddhi__intro { padding: 0; }
		.ddhi__intro-screen {			
			margin-top: 20px;
			height: 300px;
		}		
	}
	
	.ddhi__legend {
		width: 90%;
		margin: 40px 0 0 auto;
		text-align: left;
		overflow: hidden;
	}
		.ddhi__legend__icon {
			float: left;
			margin-right: 1.5em;			
		}
		.ddhi__legend .caption {
			margin-bottom: 0;
			margin-top: -8px;
			font-size: 0.8em;
			color: #696969;
		}
		
		.icon-stack {
			font-size: 13px;
		}
		.icon-stack-base {
			color: #a0a0a0;
		}
		.icon-stack-base.primary {
			color: #cf4436;
		}
		
.hr { display: inline-block; position: relative; }
	.hr:before, .hr:after { 
		height: 2px; 
		width: 209px; 
		content: ""; 
		display: block; 
		position: absolute; 
		top: 55%; 
		border-top: 1px solid #48505b;
	}
		.hr:before { left: -240px; }
		.hr:after { right: -240px; }
		
.ddhi__sources	{
	margin-top: -30px;
	margin-bottom: -40px;
	overflow: hidden;
}

.source {
	position: relative;	
	margin-top: 30px;	
	overflow: hidden;
	padding: 0 10px;
	margin-bottom: -1px;
	border-bottom: 1px solid #bdbdbd;
	-webkit-box-shadow: 0px 1px 4px 0px -3px #bdbdbd;
    box-shadow: 0px 1px 4px 0px -3px #bdbdbd;
}
	.source__logo {
		background-position: 50% 50%;
		background-repeat: no-repeat;
		//width: 280px;
		height: 80px;
		line-height: 80px;
		margin: 0 auto 10px;
	}
		.source__logo img {
			vertical-align: middle;
		}
	.source__screen-wrap {
		position: relative;
		padding-bottom: 200px;
	}
	.source__screen {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		-webkit-box-shadow: 0px 0px 4px 0px #bdbdbd;
        box-shadow: 0px 0px 4px 0px #bdbdbd;		
		-webkit-border-radius: 3px;
        border-radius: 3px;
	}

.ddhi__community {
	overflow: hidden;
	margin-top: 20px;
	margin-bottom: -20px;
}
	.ddhi__community--title {
		margin-top: -10px;
	}
	.ddhi__community__flow {
		color: #f0f1f3;
		color: rgba(81,89,99,0.1);
		font-size: 120px;
		position: absolute;
		top: 30px;
		right: 0;
		margin-right: -0.35em;
	}
		@media only screen and (max-width: 40em) {
			.ddhi__community__flow {
				display: none;
			}
		}
	
	.ddhi__community .headfont {
		margin-bottom: 0;
	}
	
.ddhi-community-icon,
.ddhi-source-icon,
.ddhi-develop-icon,
.ddhi-small-icons {	
	background-image: url('/static/img/duckduckhack/user-sprite.png');
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
}

.ddhi-community-icon,
.ddhi-source-icon,
.ddhi-develop-icon {	
	height: 91px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.ddhi-community-icon {
	background-position: left top;
	width: 138px;
}
.ddhi-source-icon {
	background-position: -138px top;
	width: 114px;
}
.ddhi-develop-icon {
	background-position: right top;
	width: 129px;
}

.ddhi-small-icons {	
	background-position: left bottom;
	width: 159px;
	height: 33px;
}