/*global*/

body {
	font-family: 'Nunito', sans-serif;
	font-weight: 100;
	font-size: 1.125em;
	color: #faf3bc;
	background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
	color: #4fb69f;
	text-decoration: none;
}

img {
	max-width: 100%;
}

/*typography*/

h1 {
	font-size: 1.750em;
	font-weight: 100;
	letter-spacing: -1.5px;
}

h2 {
	font-weight: 100;
	font-size: 1.500em;
	color: #b4c34f;
}
h3 {
	font-weight: 100;
	font-size: 1.125em;
	color: #ed6c85;
}

/*buttons*/

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

.btn:hover {
	background-color: #4cc4a7;
}


.btn-small {
	padding: 10px 25px;
	color: #faf3bc;
	font-size: .75em;
	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*/

#nav ul {
	width: 100%;
	margin: 20% 0 0 0;
	list-style: none;
	float: right;
	}
#nav ul li {
	float: left;
	}
	#nav ul li.about {
		width: 15%;
	}
	#nav ul li.pricing {
		width: 35%;
	}
	#nav ul li.locations {
		width: 15%;
	}
	#nav ul li.contact {
		width: 25%;
		margin: 0 5% 0 5%;
		padding: 8px 0;
		color: #faf3bc;
		font-family: 'Nunito', sans-serif;
		text-align: center;
		border: 0;
		font-weight: 100;
		font-size: .75em;
		background: #b22316 url('texture.png') no-repeat right top;;
		border-radius: 25px;
		-webkit-border-radius: 25px;
		-moz-border-radius: 25px;
		text-transform: uppercase;
	}
#nav ul li.contact:hover {
		background-color: #c62718;
	}
#nav ul li a {
	color: #faf3bc;
	display: block;
	text-decoration: none;
	}

/*content*/

#intro {
	margin: 0 0 5% 0;
}

#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 span{
	color: #b22316;
	font-weight: 600;
}

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

/*media queries*/

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


#intro {
	width: 100%; 
}
#intro-img {
	display: none;
}
#intro h1 {
	margin:  0 0 5% 0;
}
#logo {
	width: 100%;
	text-align: center;
}
#logo img {
	max-width: 55%;
}
#nav {
	width: 100%;
}
#nav ul {
	margin: 0;
}

#nav ul li {
	float: left;
	margin: 5% 0 0 0;
	}
	#nav ul li.about {
		width: 15%;
	}
	#nav ul li.pricing {
		width: 35%;
	}
	#nav ul li.locations {
		width: 25%;
	}
	#nav ul li.contact {
		width: 25%;
		margin: 5% 0 2% 0;
	}


}


/* Small ----------- */
@media screen and (max-width : 480px) {

.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 img {
	max-width: 100%;
}
#nav ul {
	margin: 5% 0;
}

#nav ul li a {
	-webkit-user-select: none;
	font-size: 0.750em;
}

#nav ul li {
	float: left;
	margin: 5% 0;
	}
	#nav ul  li.about {
		width: 20%;
		text-align: left;
	}
	#nav ul  li.pricing {
		width: 55%;
		text-align: center;
	}
	#nav ul  li.locations {
		width: 25%;
		text-align: right;
	}
	#nav ul  li.contact {
		width: 100%;
		margin: 0;
		font-size: 1em;
	}


#intro, #about {
	display: none;
}
#featured-cupcake, #new-cupcakes {
	margin: 5% 0;
}

}