/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

target / context = result

 */
.grid_1 { width: 6.5%; } /* 65px/1000px = 0.065px */
.grid_2 { width: 15%; } /* 150px/1000px =  0.15px */
.grid_3 { width: 23.5%; } /* 235px/1000px = 0.235px */
.grid_4 { width: 32%; } /* 320px/1000px = 0.32px */
.grid_5 { width: 40.5%; } /* 405px/1000px = 0.405px */
.grid_6 { width: 49%; } /* 490px/1000px = 0.49px */
.grid_7 { width: 57.5%; } /* 575px/1000px = 0.575px */
.grid_8 { width: 66%; } /* 660px/1000px = 0.66px */
.grid_9 { width: 74.5%; } /* 745px/1000px = 0.745px */
.grid_10 { width: 83%; } /* 830px/1000px = 0.83px */
.grid_11 { width: 91.5%; } /* 915px/1000px = 0.915px */
.grid_12 { width: 100%; } /* 1000px/1000px = 1 */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}

.left{margin-left:0;}
.right{margin-right:0;}
.bottom {margin-bottom:0;}
.top {margin-top:1%;}

.skinny h1, .skinny h3 { margin:0;}
.skinny h3 { padding-top:1.5%;}

.container{
	width: 90%; /*width: 1000px;*/
	max-width: 1000px;
	margin: auto;
	
}

.hideme {
	display: none;
}

.clear{clear:both;display:block;overflow:hidden;/*visibility:hidden;width:0;height:0*/}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

/*global*/

body {
	font-family: Helvetica, sans-serif;
	font-weight: 100;
	font-size: 1.125em;
	color: #333;
	background: #e5e5e5 url('../images/bg-p4.png') repeat;
}

a {
	color: #006699;
	text-decoration: none;
}

img, object {
	max-width: 100%;
}


/*typography*/

h1 {
	font-size: 1.750em;
	font-weight: 100;
	letter-spacing: -1.5px;
	font-family: 'PT Sans Narrow', Helvetica, sans-serif;
}

h2 {
	font-weight: 100;
	font-size: 1.500em;
	color: #273750;
	font-family: 'PT Sans Narrow', Helvetica, sans-serif;
}
h3 {
	font-weight: 100;
	font-size: 1.125em;
	color: #3b6e98;
	font-family: 'PT Sans Narrow', Helvetica, sans-serif;
}

/*buttons*/

.btn {
	padding: 15px 15px;
	color: #fff;
	background-color: #5c4993;
	/*background: #4fb69f url('img/texture.png') no-repeat right top;*/
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	text-transform: uppercase;
}

.btn:hover {
	color: #fff;
	background-color: #333333;
}


.btn-small {
	padding: 10px 25px;
	color: #fff;
	font-size: .75em;
	background-color: #c62718;
	/*background: #b22316 url('texture.png') no-repeat right bottom;*/
	border-radius: 25px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	text-transform: uppercase;
}

.btn-small:hover {
	background-color: #c62718;
}

/*navigation*/



/*content*/

#intro {
	margin: 0 0 5% 0;
	height:340px;
	overflow:hidden;
}

#intro { 
	background: #fff url('http://www.nfmt.com/images/bkg-HPB-15.jpg') no-repeat center bottom;
}

#intro h2 {
	color: #eff169; font-weight: bold; font: 2.50em 'PT Sans Narrow', Helvetica, sans-serif; text-transform: uppercase; 
}
 #intro p {
	color: #eff169; font: 1.25em 'PT Sans Narrow', Helvetica, sans-serif; text-transform: uppercase;
 }
#intro h1 { 
	width: 100%;
	max-width: 680px;
	height: 75px;
	margin: 3% auto;
	background: url('http://www.nfmt.com/images/intro-logo-HPB.png') no-repeat center top;
	text-indent: -9000px;
}

#about360, #aboutNFMT { margin-top: 3%;}

.info h2 {margin: 0 auto; text-align:center;}
.info p {margin: 0 auto; text-align:center; padding-bottom:2%;}
.reg {margin: 0 auto;}
.btm { margin: 4% auto;}

/*#subIntro {
	margin: -7% 0 10% 0;
}

#subIntro div div{
	width: 375px;
	height: 175px;
	background-color: #fff;
	border: 3px solid #e5e5e5;
	margin: 0 auto;
}
#subIntro div div{
	
	background-color: #fff;
}
#subIntro img {
	margin: -1% 4%;
}*/


.highlight {
	width: 375px;
	height: 125px;
	text-align: center;
	}

.highlight img {margin: -5% auto;}

.subIntro 
	{
	  position: relative;
	  width: auto;
	  background: #e5e5e5;
	  -moz-border-radius: 4px;
	  border-radius: 4px;
	  padding: 1.5em 1.5em;
	  color: rgba(0,0,0, .8);
	  text-shadow: 0 1px 0 #fff;
	  line-height: 1.5;
	  margin: -15px auto;
	}


.subIntro:before, .subIntro:after 
	{
	  z-index: -1; 
	  position: absolute; 
	  content: "";
	  bottom: 15px;
	  left: 10px;
	  width: 50%; 
	  top: 80%;
	  max-width:300px;
	  background: rgba(0, 0, 0, 0.7); 
	  -webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);   
	  -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
	  -webkit-transform: rotate(-3deg);    
	  -moz-transform: rotate(-3deg);   
	  -o-transform: rotate(-3deg);
	  -ms-transform: rotate(-3deg);
	  transform: rotate(-3deg);
	}

.subIntro:after 
	{
	  -webkit-transform: rotate(3deg);
	  -moz-transform: rotate(3deg);
	  -o-transform: rotate(3deg);
	  -ms-transform: rotate(3deg);
	  transform: rotate(3deg);
	  right: 10px;
	  left: auto;
	}	

.subIntro:not(:hover){background: #ddd;}

#new-cupcakes img {
	box-sizing: border-box;
	background-color: #faf3bc;
	padding: 8px;
	margin: 0 0 5% 0;
}

#featured-cupcake img {
	box-sizing: border-box;
	background-color: #faf3bc;
	padding: 8px;
	margin: 0 0 5% 0;
}

#contact { margin-top: 2%;}
#contact span{
	color: #b22316;
	font-weight: 600;
}

#copyright {
	border-top: 8px solid #2a0400;
	padding: 2% 0;
	margin: 2% 0;
	text-align: center;
}

/*form*/


	form { 
		width: 		90%; 
		background: #333;
		padding: 	10px 15px; 
		margin: 	0 auto; 
		color: 		#333;
		overflow: 	hidden;
		-moz-border-radius:  	15px; 
		-webkit-border-radius:  15px; 
		border-radius: 			15px;  
		-moz-box-shadow:	0px 0px 5px #333;
		-webkit-box-shadow:	0px 0px 5px #333;
		-ms-box-shadow:	0px 0px 5px #333;
		box-shadow:	0px 0px 5px #333;
	}
	label { 
		position:	relative;
		clear:  	both; 
		display: 	block; 
		text-shadow: 0px -1px 0px #000; 
		text-shadow: 0 -1px rgba(0,0,0,0.5);  
		font-family: 'PT Sans Narrow', Helvetica, sans-serif; 
	}
	
	sup { color: #ccc; }
	
	input { 
		font-size:			1.8em; 
		margin-bottom:		25px;
		border: 			2px solid #333; 
		padding: 			8px; 
		background: 		#fff; 
		color: 				#696969; 
		width: 				90%;  
		-webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2); 
		-moz-box-shadow: 	inset 0px 2px 2px rgba(0,0,0,0.2); 
		-ms-box-shadow: 	inset 0px 2px 2px rgba(0,0,0,0.2); 
		box-shadow: 		inset 0px 2px 2px rgba(0,0,0,0.2); 
	}
	
	input:focus { 
		border: 			2px solid #000; 
		-webkit-box-shadow:	none; 
		-moz-box-shadow: 	none; 
		box-shadow: 		none; 
	}
	
	input[type=date],
	input[type=number],
	input[type=submit] { 
		-moz-border-radius:  0px; 
		-webkit-border-radius:  0px; 
		border-radius:  		0px; 
		width: 				auto; 
	}

	input[type=checkbox] { 
		display: 			inline; 
		font-size:			1.8em; 
		border: 			none;
		width: 				auto;  
		padding: 			10px;
		margin: 			0px;
		margin-bottom: 		-7px;
	}
	
	input:invalid { background: #e5e5e5 url(http://www.nfmt.com/images/invalid.png) no-repeat center right; }
	input:valid { background: #f3f8ed url(http://www.nfmt.com/imageas/valid.png) no-repeat center right; }	
	
	
	input[type=submit] { 
		background: 		#e5e5e5; 
		display: 			inline-block; 
		padding: 			5px 10px 6px; 
		color: 				#3366cc; 
		text-decoration: 	none; 
		font-weight: 		bold;  
		border: 			none; 
		position: 			relative; 
		cursor: 			pointer; 
		font-size: 			2.0em; 
		margin-top:			30px;
		-moz-border-radius: 5px; 
		-webkit-border-radius: 5px; 
		-ms-border-radius: 	5px; 
		border-radius: 		5px; 
		-moz-box-shadow: 	0 1px 3px #999; 
		-webkit-box-shadow: 0 1px 3px #999; 
		-ms-box-shadow: 	0 1px 3px #999; 
		box-shadow: 		0 1px 3px #999; 
		text-shadow: 		0 -1px 1px #fff; 		
		-webkit-transition: all 0.2s linear
	}
	
	input[type=submit]:hover	{ 
		background-color: 	#E5B96F;
		-webkit-transform:	scale(1.1); 
		-moz-box-shadow: 	0 1px 6px #000; 
		-webkit-box-shadow: 0 1px 6px #000; 
		box-shadow: 		0 1px 6px #000; 
	}
.legal { 
		clear:				both;
		font-size:			10px; 
		margin: 			15px 0; 
		color: 				#fff; 
		text-shadow: 		0px -1px 0px #000; 
		text-shadow: 		0 -1px rgba(0,0,0,0.5); 
	}
	
	

/*media queries*/

/* Larger ----------- */
@media screen and (max-width: 1024px) {


#intro {
	width: 100%; 
}

/*.info h2, .info p {
	margin: 0;
}

.info h2 {margin: -4% auto; text-align:center;}
.info p {margin: 4% auto; text-align:center;}*/


#logo {
	width: 100%;
	text-align: center;
}

#logo object {
	max-width:  55%;
}
.skinny h3 { padding: 1.5% 0 0 3%; }
/*.reg {margin: 5% auto;}
	.reg p { margin:0;}*/
#aboutNFMT, #about360, #about {
	margin: 5% 0;
}

}




/* Smaller ----------- */
@media screen and (max-width : 650px) {

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	width:100%;
}
/*#logo object {
	max-width: 90%;
	margin: 5% 0;
}*/

#intro {
	height:100%;
	background-size: 300%;
}

#intro h1 { 
	width: 100%;
	margin: 1% auto;
}

#intro h1 object {
	max-width:  55%;
}
#intro h2 {
	font: 1.0em 'PT Sans Narrow', Helvetica, sans-serif; margin: 0 auto; 
}
 #intro p {
	font: 1.0em 'PT Sans Narrow', Helvetica, sans-serif; margin: 0 auto; padding-bottom:4%;
 }
 #about, .skinny h3, .hideme {
	display: none;
}
.btn {
	padding: 10px 10px;
}
.btm {margin: 0 2% 1% 0;}
.highlight, #aboutNFMT, #about360, #about {
	margin: 5% 0;
}

}