body {
	background: url('images/bg.jpg');
	background-repeat:no-repeat;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size:14px;
}

#container {
	width:100%;
	max-width:914px;
	margin:auto;

}
#header {
	padding-top:10px;
}
#header-left {
	float:left;
}
#header-right {
	float:left;
	margin-left:144px;
	padding-top:25px;
}
#picture {
	border:1px solid black;
	height:100%;
	margin-top:35px;
}
#navigation {
	margin-top:10px;

}


/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-left:2px;
    overflow: hidden;
    background-color: #FF0000;
    border:1px solid black;

}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 8px 57px;
    text-decoration: none;
   
    font-size: 18px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #D20000;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}


#motto {
	margin-top:10px;
	text-align:center;
	font-size:22px;
	color:red;
}
#contact {
	margin-top:20px;
}
#wrapper {
	margin-top:20px;
	background: url('images/wrapper-bg.jpg');
	line-height:22px;
}
#wrapper-location {
	margin-top:20px;
	line-height:22px;
}
#wrapper-left {
	float:left;
	width:567px;
}

#wrapper-right {
	float:left;
	margin-left:40px;
}
#payment-options {
	margin-top:15px;
}
#list {
	margin-top:15px;
}
#serving {
	margin-top:15px;
}
#tag-line {
	text-align:center;
	margin-top:30px;
	font-weight:bold;
}
#selection-guide {
	margin-top:15px;
}
#address {
	margin-top:15px;
	text-align:center;
}
#tagline {
	font-weight:bold;
	text-align:center;
	margin-top:10px;
}
#sig {
	font-size:11px;
	margin-top:15px;
	text-align:center;
}


/* CLASSES */

.address {
	font-size:18px;
}
.red {
	color:red;
	text-decoration:underline;
}
.picture {
	vertical-align:middle;
}
.red-2 {
	color:red;
}
.small {
	font-size:12px;
}
.no-border {
	border:0px;
}
.logo {
	width:100%;
	max-width:508px;
}
.slide {
	width:100%;
	max-width:912px;
	
}
.border {
	border: 1px solid black;
}



/* MEDIA QUERIES */

@media screen and (max-width: 937px)
{
body {
background-image:none;

}
#header-left {
float:none;
width:100%;
text-align:center;

}
#header-right {float:none; width:100%; margin-left:0px; text-align:center;

}
#picture {
margin-top:10px;


}
#wrapper {
	background-image:none;
}
#wrapper-left {float:none; width:100%; }
#wrapper-right {float:none; width:100%; margin-left:0px; margin-top:10px;

}
	ul.topnav li a {
   
    padding-left:5px;
    padding-right:5px;
   

}#navigation {
margin-top:5px;

}}

@media screen and (max-width:939px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:939px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
     padding: 8px 5px;
  }

}
@media screen and (max-width:624px) {


.google-maps {
       position: relative;
        padding-bottom: 75%; 
        height: 0;
       overflow: hidden;
    }
   .google-maps iframe {
       position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
   }

}

@media screen and (max-width:624px) {


#address {
	font-size:13px;
	
}}

@media screen and (max-width:511px) {


#address {
	font-size:11px;
}}