@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Maiden+Orange');
body {
  background-image: url(images/sprinkles-bg.jpg);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.8125; /*13px / 16px */
}
p {
  line-height: 18px;
  margin-bottom: 12px;
  color: #521515;
}
h1 {
  font-family: "Maiden Orange", Georgia, Serif;
  font-size: 2.25em; /*36px / 16px */
  color: #e02575;
  margin-bottom: 8px;
}
header {
  width: 100%; /* 960px*/
  height: 160px;
  background-color: #fff;
  position: relative;
}
header .content {
  width: 100%; /* 960px*/
  margin: 0 auto;
  position: relative;
}
header img {
  position: absolute;
  left: 3.4375%; /*33px / 960px */
  top: 14px;
  z-index: 100;
}
nav {
  width: 100%; /* 960px */
  font-family: "Maiden Orange", Georgia, Serif;
  font-size: 1em; /*16px / 16px */
  text-align: center;
  position: absolute;
  bottom: 0;
  border-bottom: 3px solid #521515;
}
nav ul {
  display: block;
  background-color: #00caca;
  color: #fff;
  padding: 12px 1.25em; /*12px / 960px */
}
nav ul li {
  display: inline;
  list-style-type: none;
  margin: 0 4.1666666666667%; /*40px / 960px */
}
nav ul li a {
  color: #fff;
  text-decoration: none;
}
nav ul li a:hover {
  border-bottom: 2px dotted #fff;
}
main {
  width: 80%; /*894px  id the min*/
  margin: 0 auto;
  padding: 18px 3.4375%; /*33px  / 894px */
  background-color: #fff;
  overflow: hidden;
}
main img {
  width: 100%;
} /*I added this in*/
section {
  margin-top: 16px;
  width: 63.75838926174497%; /*570px /894px*/
  float: left;
}
aside {
  width: 33.98434004474273%; /*277px /894px */
  margin-top: 16px;
  float: right;
}
.flavors {
  width: 89.89169675090253%; /*249px /277*/
  height: 264px;
  background-color: #fbae37;
  border-radius: 5px;
  padding: 14px 1.565995525727069%; /*14px / 894px*/
  background-image: url(images/ice-cream.png);
  background-repeat: no-repeat;
  background-position: right bottom;
}
.flavors h2 {
  font-family: "Maiden Orange", Georgia, Serif;
  font-size: 1.625em; /*26px / 16px*/
  color: #fff;
  text-align: center;
  border-bottom: 3px dotted #fff;
  text-transform: uppercase;
}
.flavors p {
  color: #fff;
  text-align: center;
}
.flavors ul {
  list-style-type: disc;
  padding-left: 30px;
  list-style-position: outside;
}
.flavors ul li {
  color: #fff;
  margin-bottom: 6px;
}
button {
  color: #fff;
  font-family: "Maiden Orange", Georgia, Serif;
  font-size: 1.25em; /*20px / 16px*/
  text-transform: uppercase;
  background: #00caca; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#00caca, #009292); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#00caca, #009292); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#00caca, #009292); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#00caca, #009292); /* Standard syntax (must be last) */
  border-radius: 5px;
  padding: 8px 2.237136465324385% 4px; /*20px / 894px*/
  border: none;
}
footer {
  background-color: #ffcade;
  width: 80%; /*894px  id the min*/
  margin: 0 auto;
  padding: 18px 3.4375%; /*33px  / 894px */
  font-family: "Maiden Orange", Georgia, Serif;
  overflow: hidden;
}
#footer-left h4, #footer-right h4 {
  font-size: 1.125em; /*18px / 16px*/
  margin-bottom: 4px;
}
#footer-left, #footer-right {
  width: 33.33333333333333333%; /*298px / 894px*/
}
#footer-left {
  float: left;
}
#footer-center {
  clear: both;
  font-size: 0.625em; /*10px / 16px*/
  text-align: center;
}
#footer-right {
  width: 33.3333333333333%; /*298px / 894px */
  float: right;
  text-align: right;
}


/*This media query will recognize when the screen dimensions are 1024px or smaller*/
@media only screen and (max-width: 1024px) {
  .content {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  header img {
  	width: 20%;
	margin:0 auto;
	position: relative;
    left: 0;
    top: 0;
     }
  nav {
    position: relative;
    width: 100%;
  }
  main img {
    min-height: 120px;
    width: 100%;
    margin: 0px auto;
  }
  main h1 {
    font-size: 1.625em;
  } /*26px / 16px */
}
@media only all and (max-width: 480px) {
	header {min-height: 320px;} 
	
nav {
    width: 100%;
    margin: 10px auto;
	  
    }
  nav a {
    color: white;
    display: block;
    border-bottom: 1px solid white;
    padding: 5px 0px;
  }
  nav a:hover {
    background-color: white;
	  color:cadetblue;
  }
  nav li {
    margin: 10px 0px;
  }
	main {position:relative;}
  main img {
    height: 200px;
    margin-bottom: 0px;
  }
	main {display:block;  width:100%; }
	section {float:none; margin: 20px auto; width:90%; text-align: center;}
	aside {float:none; margin: 20px auto; width:90%}
	aside ul li {text-align: left;}
	footer {width:100%; display:block; padding:2px; font-size: .75em;}/*12px / 16px*/
	#footer-left {display:block; margin:0 auto; float:none;text-align: center; border-bottom:1px solid gray; padding-top:20px;}
	#footer-right {padding-top:20px;display:block;float:none;margin:0 auto; text-align: center;border-bottom:1px solid gray;}
	#footer-center {padding:20px 0;}
	
}