@charset "utf-8";
/* CSS Document */


h1 { text-align:center;line-height:55px }
h2 { font-family:Oswald, Arial; font-size:22px;color:#FFF;background-color:#99CA3C;padding:15px;display:inline-block;margin:0;margin-top:50px;line-height:30px }
p { margin-top:25px;line-height:27px; }
.foreword { font-size:24px;line-height:30px;text-align:center;font-style:italic; }

.header_banner {
	width:100%;height:600px;z-index:100;
	
	background-attachment:fixed;background-position:center;background-size:cover; background-repeat:repeat-y;
	
	margin:0; padding:0;
	
	position:relative;
	margin-bottom:70px; /* to account for icon absolutely positioned at bottom */
}

.header_banner.families { border-bottom:5px solid #99ca3C }
#families h3 { color:#99CA3C }
.header_banner.memory { border-bottom:5px solid #00adef }
#memory h2 { background-color:#00adef }
#memory h3 { color:#00adef }
.header_banner.technology { border-bottom:5px solid #ec008b }
#technology h2 { background-color:#ec008b }
#technology h3 { color:#ec008b }
.header_banner.products { border-bottom:5px solid #5E3075; }
#products h2 { background-color:#5E3075 }
#products h3 { color:#5e3075 }

img.main {
	margin:0 15px 0 auto;
	width:450px;
}

.main { /* position:absolute;left:50%;transform:translate(-50%,-50%);top:40%; */ display:inline-block;vertical-align:middle; }
iframe { display:inline-block }

#top { width:100%;height:450px;text-align:center;

	background-attachment:fixed;background-position:center;background-size:cover; background-repeat:repeat-y;
 }

.category_wheel { max-width:95%;width:500px;padding:0;margin:0 auto;margin-top:-45px;height:90px;	display:block;background-color:#FFF;border-radius:10px;border:2px solid #CCC;
			
		/* for */
		overflow:hidden;
		
		
		 }

.category_wheel.expand { overflow:visible;height:180px; }		 

.wheeler { margin:0 }

.wheel_item { height:86px }
.category img { margin:11px 10px 0 10px; }

.grid.why { text-align:center;z-index:10000;position:relative; }
.grid.why div:hover h3 { opacity:.5 }
.grid.why img { border:5px solid white;margin-top:-64px;border-radius:100% }

.grid.top { margin-top:-43px;position:relative;z-index:10000; margin-bottom:30px; /* correct for absolute links at bottom */ }
.grid.top img.icon { display:block;margin:0 auto;text-align:center;width:86px; }
.grid.top h2 { margin-top:15px;width:100%; }
.grid.top p { margin-top:15px }

.hide {display:none }

h3 { font-family:Oswald, Arial; font-size:22px;color:#5E3075;margin:0;margin-top:50px;line-height:32px; }

.fourdots { /* THIS IS A CONTENT DIVIDER */ 
	margin:25px auto 0px auto;display:block;text-align:center;
}

.fourdots div { border-radius:100%;width:14px;margin-right:8px;display:inline-block;	height:14px; }


.fourdots div:nth-child(1) { background-color:#5e3075 }
.fourdots div:nth-child(2) { background-color:#99ca3c }
.fourdots div:nth-child(3) { background-color:#00adef }
.fourdots div:nth-child(4) { background-color:#ec008b;margin-right:0 }
	
.content_container { padding-bottom:50px }

.goto_box { font-family:Oswald, Arial;font-size:15px;border:1px solid #666; margin:15px 0; text-align:center;
		display:inline;padding:10px;color:#666;position:absolute;top:100%; }
		
		.goto_box img { margin-left:3px;width:15px; }
		
		.goto_box:hover { box-shadow:2px 2px 3px rgba(0,0,0,0.33); }
		
		
/* ICONS WITH A LETTER S, BECAUSE THERE'S MULTIPLE ICONS??? // ... benefit icon css */
.icons { margin-top:50px;margin-left:auto;margin-right:auto;display:block;text-align:center }
.icons img { margin-top:10px;margin-right:10px; }
.icons img, .icons h3 { display:inline-block;vertical-align:middle; }
.icons h3 { font-size:22px;font-family:oswald,arial;margin-right:30px;margin-top:10px }
.icons div { display:inline-block;margin-top:15px; }


.header_banner { margin-bottom:0 }
.icon-block { height:86px;z-index:1000;position:relative;margin-bottom:50px }
.icon-block img { margin:-70px auto 0 auto;display:block;text-align:center } 

ol { font-family:Oswald, Arial;font-weight:300;color:#666;font-size:22px;	margin-top:30px;display:block;padding-left:0; }
ol li { margin:0 25px 15px 0;display:inline-block;margin-left:0; }

.is-sticky > nav {  }


@media (max-width: 1020px) {
	.content_container { padding-left:15px;padding-right:15px; }	
	.grid [class*='col-'] { margin-top:25px }
	.grid [class*='col-']:first-of-type { margin-top:0}
	#article { margin-left:auto;margin-right:auto;display:block; }
	
	.header_banner {	
		background-attachment:scroll;
		height:400px;
	}
}