/*---footer fix---*/
#footer {margin-top:60px !important;}

/*---TOP BANNER---*/


#home-full-width-banner {
	width:100%;
  	height:398px;
	background: url(../images/dndnames-top-banner.png) #cccccc center no-repeat;
	background-size:cover;
	z-index:-999;
	position:absolute;
	top:123px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

#home-top-banner-container {
	margin:91px 0 80px 0;
	padding:0 30px;
	width:100%;
	height:398px;
}

#home-top-banner-inner {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background:url(../images/dndnames-top-banner-illustration.png) center bottom no-repeat;
	background-size:100% auto;
	position:relative;
}

#home-top-banner-inner h1 {
	margin:0;
	padding:0;
	color:#2e1d24;
	font-size:50px;
	font-weight:300;
	width:410px;
	position:absolute;
	top:60px;
	left:39px;
}


/*---SPACERS---*/

.home-column-20 {
	display:table-cell;
	width:20px;
}
.home-column-30 {
	display:table-cell;
	width:30px;
}


/*---2X SECT---*/


#home-2x-section-container {
	display:table;
	table-layout:fixed;
	width:100%;
	margin:0 0 80px 0;
	padding:0 10px;
}

#home-2x-section-left {
	display:table-cell;
	width:100%;
	background:url(../images/dndnames-home-2col-endless-long.png) #e3ebe8 center top no-repeat;
	background-size:auto 340px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

.home-2x-section-inner {
	margin:263px 20px 0 20px;
}

.home-2x-section-inner h2 {
	margin:0 -20px;
	padding:24px 30px;
	color:#fff;
	background: rgba(46,29,36,.5);
	font-size:24px;
	font-weight:500;
}

.home-2x-section-inner p {
	margin:0;
	padding:25px 10px 33px 10px;
	color: #7c8683;
	line-height: 1.45em;
  	font-size:16px;
}

#home-2x-section-right {
	display:table-cell;
	width:100%;
	background:url(../images/dndnames-home-2col-expert-long.png) #e3ebe8 center top no-repeat; 
	background-size:auto 340px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}


/*---3X SECT---*/


#home-3x-section-container {
	display:table;
	table-layout:fixed;
	width:100%;
	margin:250px 0 80px 0;
	padding:0 10px;
}

#home-3x-section-left {
	display:table-cell;
	width:100%;
	background:url(../images/dndnames-home-3col-mobile-long.png) #e3ebe8 center top no-repeat;
	background-size:auto 350px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

.home-3x-section-inner {
	margin:244px 20px 0 20px;
}

.home-3x-section-inner h3 {
	margin:0 -20px;
  	padding:24px 30px;
	color:#fff;
	background: rgba(46,29,36,.5);
	font-size:24px;
	font-weight:500;
}

.home-3x-section-inner p {
	margin:0;
	padding:25px 10px 33px 10px;
	color: #7c8683;
    line-height: 1.45em;
	font-size:16px;
}

#home-3x-section-center {
	display:table-cell;
	width:100%;
	background:url(../images/dndnames-home-3col-char-long.png) #e3ebe8 center top no-repeat;
	background-size:auto 350px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

#home-3x-section-right {
	display:table-cell;
  	width:100%;
  	background:url(../images/dndnames-home-3col-more-long.png) #e3ebe8 center top no-repeat;
	background-size:auto 350px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}


/*---1X SOCIAL SECT---*/


#home-1x-social-container {
	display:table;
	table-layout:fixed;
	width:100%;
	margin:0 0 80px 0;
	padding:0 10px;
}

#home-1x-social-column {
	display:table-cell;
	width:100%;
	background:#ee3129;
	overflow:hidden;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

#home-1x-social-column-inner {
	margin:0 20px;
}
#home-1x-social-column h4 {
	float:left;
	margin:48px 10px 32px 10px;
	padding:0;
	color:#2e1d24;
	font-size:24px;
	font-weight:500;
}

#home-share-links {
	float:right;
	margin:30px 10px 26px 10px;
	display: inline-block;
}

#home-share-instagram,
#home-share-twitter,
#home-share-facebook,
#home-share-reddit,
#home-share-email {
	margin: 2px 4px;
    padding: 4px;
    display: inline-block;
    width: 55px;
    height: 55px;
    background: url(../images/dndnames-home-social.png) no-repeat;
}

#home-share-instagram {background-position:0 0;}
#home-share-instagram:hover {background-position:0 -65px;}

#home-share-twitter {background-position:-69px 0;}
#home-share-twitter:hover {background-position:-69px -65px;}

#home-share-facebook {background-position:-138px 0;}
#home-share-facebook:hover {background-position:-138px -65px;}

#home-share-reddit {background-position:-207px 0;}
#home-share-reddit:hover {background-position:-207px -65px;}

#home-share-email {background-position:-276px 0;}
#home-share-email:hover {background-position:-276px -65px;}



/*---1X GENS SECT---*/


#home-1x-gens-container {
	display:table;table-layout:fixed;width:100%;margin:0 0 80px 0;padding:0 10px;
}

#home-1x-gens-column {
	display:table-cell;
  	width:100%;
	background:#e3ebe8;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

#home-1x-gens-column-inner {
	margin:0 20px;
	padding-bottom:20px;
}

#home-1x-gens-column-inner h5 {
	margin:0 -20px 20px -20px;
	padding:24px 30px;
	color:#fff;
	background: rgba(46,29,36,.5);
	font-size:24px;
	font-weight:500;
}

.home-1x-gens-rows {
	display:table;
  	width:100%;
  	margin:0;
	padding:0;
}

.home-1x-gens-row-gen {
	display:table-cell;
	width:20%;
	background:#e3ebe8;
}

.home-1x-gens-row-gen a img {
	width:100%;
	height:auto;
}


/*---1X ABOUT SECT---*/


#home-1x-about-container {
	display:table;
	table-layout:fixed;
	width:100%;
	margin:250px 0 80px 0;
	padding:0 10px;
}

#home-1x-about-column {
	display:table-cell;
	width:100%;
	background:url(../images/dndnames-home-1col-coast.png) #e3ebe8 center top no-repeat;
	background-size:auto 340px;
	box-shadow: 0 2px 4px 0 rgba(46,29,36,.2), 0 2px 5px 0 rgba(46,29,36,.2);
}

#home-1x-about-inner {
	margin:263px 20px 0 20px;
}

#home-1x-about-inner h6 {
	margin:0 -20px;
	padding:24px 30px;
	color:#fff;
	background: rgba(46,29,36,.5);
	font-size:24px;
	font-weight:500;
}

#home-1x-about-p-top {
	margin:0;
	padding:25px 10px 16px 10px;
	color: #7c8683;
	line-height: 1.45em;
	font-size:16px;
}

#home-1x-about-p-bot {
	margin:0;
	padding:0 10px 33px 10px;
	color: #7c8683;
	line-height: 1.45em;
	font-size:16px;
}


/*---RESPONSIVE---*/

@media screen and (max-width: 58em) {
	.home-2x-section-inner h2,
	.home-3x-section-inner h3,
	#home-1x-social-column h4,
	#home-1x-gens-column-inner h5,
	#home-1x-about-inner h6 {
		font-size:20px;
	}
	.home-2x-section-inner p,
	.home-3x-section-inner p,
	#home-1x-about-p-top,
	#home-1x-about-p-bot {
		font-size:14px;
	}
	.home-2x-section-inner,
	#home-1x-about-inner {margin-top:268px;}
	.home-3x-section-inner {margin-top:254px;}
    #home-1x-about-p-top {padding-bottom:18px;}
	#footer {margin-top:30px !important;}
	#home-top-banner-inner h1 {
		font-size:46px;
    }
}



@media screen and (max-width: 52em) {
	#home-top-banner-container,
	#home-2x-section-container,
	#home-1x-social-container,
	#home-1x-gens-container,
	#home-1x-about-container {
		margin-bottom:60px;
	}
	#home-3x-section-container {
		margin-bottom:45px;
	}
	#home-3x-section-container,
	#home-1x-about-container {
		margin-top:180px;
	}
}



@media screen and (max-width: 50.62em) {
	.home-2x-section-inner h2 {
		height:96px;
	}
	.home-2x-section-inner {
		margin-top:214px;
	}
	.home-3x-section-inner,
	#home-1x-about-inner {
		margin-top:238px;
	}
	#home-3x-section-container div.home-column-20,
	#home-3x-section-container div.home-column-30 {
		display:none;
		width:0;
		height:0;
    }
	#home-3x-section-container {margin-top:12px;}
	#home-3x-section-container,
	#home-3x-section-left,
	#home-3x-section-center,
	#home-3x-section-right {
		display:inline-block;
	}
	#home-3x-section-left,
	#home-3x-section-center,
	#home-3x-section-right {
		width:auto;
		margin: 15px 20px;
		background-size: auto 310px;
	}
	#home-2x-section-left,
	#home-2x-section-right,
	#home-1x-about-column {
		background-size: auto 310px;
	}
	#home-full-width-banner,
	#home-top-banner-container {
		height:310px;
	}
	#home-top-banner-inner h1 {
		font-size: 36px;
		top: 45px;
    }
	#home-share-links {
		float: left;
		margin: 0px 10px 24px 7px;
	}
	#home-1x-social-column h4 {
		margin: 30px 10px 10px 10px;
		width:300px;
	}
	#home-share-instagram,
	#home-share-twitter,
	#home-share-facebook,
	#home-share-reddit,
	#home-share-email {
		margin:6px 4px;
    }
}



@media screen and (max-width: 46.0625em) {
	#home-full-width-banner {top:97px;}
	#home-top-banner-container {margin-top:97px;}
	#home-top-banner-inner {
      background: url(../images/dndnames-top-banner-illustration.png) right bottom no-repeat;
      background-size: 120% auto;
	}
	#home-top-banner-inner h1 {
		left: 0;
    }
	#home-1x-social-column h4 {
		margin: 30px 10px 10px 10px;
		width:auto;
	}
}



@media screen and (max-width: 36em) {
  
	#home-top-banner-container,
	#home-2x-section-container,
	#home-3x-section-container {
		margin-bottom: 20px;
	}
	#home-1x-social-container,
	#home-1x-gens-container,
	#home-1x-about-container {
		margin-bottom: 35px;
	}
	.home-2x-section-inner h2 {
		height:auto;
	}
	#home-2x-section-container div.home-column-20,
	#home-2x-section-container div.home-column-30 {
		display:none;
		width:0;
		height:0;
    }
	#home-2x-section-container,
	#home-2x-section-left,
	#home-2x-section-right {
		display:inline-block;
	}
	#home-2x-section-left,
	#home-2x-section-right {
		width:auto;
		margin: 15px 20px;
	}
	#home-top-banner-inner h1 {
		font-size:30px;
		top:40px;
    }
	#home-full-width-banner,
	#home-top-banner-container {
		height:270px;
	}
	#home-3x-section-left,
	#home-3x-section-center,
	#home-3x-section-right,
	#home-2x-section-left,
	#home-2x-section-right,
	#home-1x-about-column {
		background-size: auto 270px;
	}
	.home-2x-section-inner,
	.home-3x-section-inner, 
	#home-1x-about-inner {
		margin-top:198px;
	}
	#home-3x-section-container{
		margin-top:-9px;
	}
	div.home-gen-y-g {
		display:none;
	}
	.home-1x-gens-row-gen {
		width:33.333%;
	}
}



@media screen and (max-width: 24em) {
	.home-2x-section-inner h2,
	.home-3x-section-inner h3,
	#home-1x-social-column h4,
	#home-1x-gens-column-inner h5,
	#home-1x-about-inner h6 {
		font-size: 16px;
	}
	.home-2x-section-inner,
	.home-3x-section-inner, 
	#home-1x-about-inner {
		margin-top:203px;
	}
}