/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {	width:100%;
		font-size: 18px;
		margin: 0 auto 0 auto;
		color:black;}

body, button{font-family: 'Raleway', arial, sans-serif;}

#controls{
	width: 100%;
	box-align:center;
	position: fixed;
	z-index: 4;
	clear:none;
	font-weight: 700;
  	background: #333;
  	padding: .3em;
  	color: white;
  	box-shadow: 0 2px 3px grey;
  	text-align: center;
}

label{
  font-weight: 300;
  font-size: 14px;
  margin: 0 .3em 0 0;

}

button{
  display: inline-block;
  padding: .3em .3em;
  margin-bottom: .3em;
  background: #333;
  border: 0;
  color: #ddd;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
}

button.active{
  color: #FFD858;
  	font-style: bold;	
}

button:hover {
	color: #FFD858;

}

button:focus{
  outline: 0 none;
}

button + label{
  margin-left: 1em;
}

.testimonial{
margin:0 auto 2em auto;
padding:10% 15% 2% 15%;
color:#333;
text-align:center;
}

.testimonial p{
font-family: 'Raleway', sans-serif;
font-size:16px;
font-style:italic;
text-align:center;
line-height:150%;
padding:6% 3% 4% 3%;
border-bottom:2px dashed #FFD858;
margin:15% 10% 0% 10%;
}

.testimonial h1{
margin:3% 10% 1% 10%;
color:#333;
font-family: 'Dancing Script', cursive;
font-size:20px;
text-align:center;
line-height:150%;
}

.testimonial img{
margin:2%;

}

.container{
	
	padding: 1% 1% 0;
  text-align: justify;
  font-size: 0.1px;
  background: white;
  -webkit-backface-visibility: hidden;
  margin-bottom:5em;
	clear:both;
}

.main {
	text-decoration: none;
}
.main a:hover {
	font-style: italic;
}

.container:after{
  content: '';
  display: inline-block;  
}

.container .mix,
.container .gap{
  display: inline-block;
  box-align:center;
  width: 95%;}

.container .mix{
  text-align:left;
  background: white;
  border-bottom: 2px solid #FFD858;
  margin: 10em;
  padding: 10em;
  display: none;
  margin-left:auto;
  margin-right:auto;}



.container .mix:after{
  content: attr(data-myorder);
  color: black;
  font-size: 15px;
  display: inline-block;
  vertical-align: center;
  horizontal-align: center;
  line-height: 20px;
  padding: 4% 4%;
  font-weight: 500;

  
}

.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 60%;
}			
			
@media all and (min-width:0px){
.container .mix,
  .container .gap{
    width: 100%;
    text-align: center;}
	#nav {clear: both;
  width:90%;}
button{
  padding: .3em .4em;
  margin-bottom: .1em;
  font-size: 13px;
	}
#controls{
	top: 140px;
}

@media all and (min-width:600px){
.container{width:100%;}
  .container .mix,
  .container .gap{
    width: 45%;}

button{
  padding: .3em .4em;
  margin-bottom: .1em;
  font-size: 13px;}
}

@media all and (min-width:800px){
.container{width:100%;}
  .container .mix,
  .container .gap{
    width: 32%;}
#controls {top: 130px;}
}
  		
@media all and (max-width:767px)
{#bananas {margin-bottom:4%;}}

#quad {margin-top:3%;}

@media all and (max-width:767px)
{#quad img {margin-bottom:2%;}}

#pullquote p {
font-size:1.7em;
				line-height:130%;
				border-left:1px solid black;
				padding:3%;}
				
@media all and (max-width:767px){
#pullquote p {border-left:none;
				border-top: 1px solid black;
				border-bottom: 1px solid black;}
}

@media all and (min-width:950px){
.container{width:100%;}
  .container .mix,
  .container .gap{
    width: 32%;}

button{
  padding: 1em 1em;
  margin-bottom: .1em;
  font-size: 16px;}
}

@media all and (min-width:800px){
.container{width:100%;}
  .container .mix,
  .container .gap{
    width: 32%;}
#controls {top: 145px;}
}